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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
vue实现短信验证码输入框
Apr 17 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP 数组实例说明
2008/08/18 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php设计模式之单例模式代码
2016/06/11 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
python跳出双层for循环的解决方法
2019/06/24 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
python归并排序算法过程实例讲解
2020/11/04 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
动物科学专业求职信
2014/07/27 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
SQL Server中搜索特定的对象
2022/05/25 SQL Server