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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
JS分页效果示例
Oct 11 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
浅谈webpack4 图片处理汇总
Sep 12 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
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
php文件上传简单实现方法
2015/01/24 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
python 字典(dict)按键和值排序
2016/06/28 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
django 发送手机验证码的示例代码
2018/04/25 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
华润集团网上药店:健一网
2016/09/19 全球购物
给老师的道歉信
2014/01/11 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL