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 相关文章推荐
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
js 窗口抖动示例
Sep 04 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
如何用JS实现简单的数据监听
May 06 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/12/30 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
用javascript控制iframe滚动的代码
2007/04/10 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Django工程的分层结构详解
2019/07/18 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
浅析python函数式编程
2020/09/26 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
工作自我评价分享
2013/12/01 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
同学联谊会邀请函
2019/06/24 职场文书
导游词之吉林花园山
2019/10/17 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
CSS的calc函数用法小结
2022/06/25 HTML / CSS