详解vue 路由跳转四种方式 (带参数)


Posted in Javascript onApril 28, 2019

1.  router-link

1. 不带参数
 <router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name 
// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
 2.带参数
 <router-link :to="{name:'home', params: {id:1}}"> 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}"> 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id

2.  this.$router.push() (函数里面调用)

1. 不带参数
 this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query传参 
 this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
 this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
 
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

3.  this.$router.replace() (用法同上,push)

4.  this.$router.go(n) ()

this.$router.go(n)

向前或者向后跳转n个页面,n可为正整数或负整数

ps : 区别

this.$router.push

跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)

向前或者向后跳转n个页面,n可为正整数或负整数

总结

以上所述是小编给大家介绍的详解vue 路由跳转四种方式 (带参数),希望对大家有所帮助,如果大家有人疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JS Timing
Apr 21 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 #Javascript
详解VUE项目中安装和使用vant组件
Apr 28 #Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 #Javascript
vue slot与传参实例代码讲解
Apr 28 #Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 #Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 #Javascript
You might like
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
javascript中常用编程知识
2013/04/08 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
python实现将内容分行输出
2015/11/05 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
Django中使用Celery的方法步骤
2020/12/07 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
python实现按日期归档文件
2021/01/30 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
农业项目建议书
2014/08/25 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
获奖感言怎么写
2015/07/31 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL