vue-router传递参数的几种方式实例详解


Posted in Javascript onNovember 13, 2018

vue-router传递参数分为两大类

  • 编程式的导航 router.push
  • 声明式的导航 <router-link>

编程式的导航 router.push

编程式导航传递参数有两种类型:字符串、对象。

字符串

字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式很简单但是不能传递参数:

this.$router.push("home");

对象

想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由、查询参数,下面分别说明两种方式的用法和注意事项。

命名路由

命名路由的前提就是在注册路由的地方需要给路由命名如:

vue-router传递参数的几种方式实例详解

命名路由传递参数需要使用params来传递,这里一定要注意使用params不是query。

目标页面接收传递参数时使用params

特别注意:命名路由这种方式传递的参数,如果在目标页面刷新是会出错的

使用方法如下:

this.$router.push({ name: 'news', params: { userId: 123 }})

代码如下:

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <button @click="routerTo">click here to news page</button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 methods:{
  routerTo(){
   this.$router.push({ name: 'news', params: { userId: 123 }});
  }
 }
}
</script>

<style>
</style>接受传递的参数:<template>
 <div>
  this is the news page.the transform param is {{this.$route.params.userId}}
 </div>
</template>
<script>
</script>

运行效果如下:

vue-router传递参数的几种方式实例详解

查询参数

查询参数其实就是在路由地址后面带上参数和传统的url参数一致的,传递参数使用query而且必须配合path来传递参数而不能用name,目标页面接收传递的参数使用query。

注意:和name配对的是params,和path配对的是query

使用方法如下:

this.$router.push({ path: '/news', query: { userId: 123 }});代码如下:<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <button @click="routerTo">click here to news page</button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 methods:{
  routerTo(){
   this.$router.push({ path: '/news', query: { userId: 123 }});
  }
 }
}
</script>

<style>
</style>接收参数如下:<template>
 <div>
  this is the news page.the transform param is {{this.$route.query.userId}}
 </div>
</template>
<script>
</script>

运行效果如下:

vue-router传递参数的几种方式实例详解

声明式的导航

声明式的导航和编程式的一样,这里就不在过多介绍,给几个例子大家对照编程式理解,

例子如下:

字符串

<router-link to="news">click to news page</router-link>

命名路由

<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

运行效果如下:

vue-router传递参数的几种方式实例详解

查询参数

<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

运行效果如下:

vue-router传递参数的几种方式实例详解

最后总结:

路由传递参数和传统传递参数是一样的,命名路由类似表单提交而查询就是url传递,在vue项目中基本上掌握了这两种传递参数就能应付大部分应用了,最后总结为以下两点:

1.命名路由搭配params,刷新页面参数会丢失

2.查询参数搭配query,刷新页面数据不会丢失

3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

总结

以上所述是小编给大家介绍的vue-router传递参数的几种方式实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
Jquery之美中不足小结
Feb 16 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 #Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 #Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 #Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 #Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 #Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 #Javascript
Vue实现一个无限加载列表功能
Nov 13 #Javascript
You might like
解析数组非数字键名引号的必要性
2013/08/09 PHP
php导出excel格式数据问题
2014/03/11 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
javascript self对象使用详解
2016/10/18 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python 异常处理的实例详解
2017/09/11 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
django跳转页面传参的实现
2020/09/17 Python
python绘图模块之利用turtle画图
2021/02/12 Python
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
幼儿园庆六一游园活动方案
2014/01/29 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
信息工作经验交流材料
2014/05/28 职场文书
合作合同协议书范本
2015/01/27 职场文书
家长会主持词开场白
2015/05/29 职场文书