详解vue-router传参的两种方式


Posted in Javascript onSeptember 10, 2018

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  1. 嵌套的路由/视图表
  2. 模块化的、基于组件的路由配置
  3. 路由参数、查询、通配符
  4. 基于 Vue.js 过渡系统的视图过渡效果
  5. 细粒度的导航控制
  6. 带有自动激活的 CSS class 的链接
  7. HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  8. 自定义的滚动条行为

vue-router传参两种方式:params和query

params、query是什么?

    params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params
     query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

方法1:

    query 方式传参和接收参数

    传参:      

this.$router.push({
       path:'/openAccount',
       query:{id:id}
     });

     接收参数:

        this.$route.query.id

     注意:传参是this.$router,接收参数是this.$route
     两者区别:

        $router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

        $route为当前router跳转对象,里面可以获取name、path、query、params等

方法2:

    params方式传参和接收参数

    传参:

this.$router.push({
       name:'/openAccount',
       params:{
         id: id
       }
     })

    接收参数: this.$route.params.id

    注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

    二者还有点区别,可以理解为:query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

router.js

export default new Router({
 routes: [
  {
   path: '/',
   name: 'login',
   component: Login
  },
  {
   path: '/register',
   name: 'register',
   component: Register
  }
})

组件(传参):

<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: 'register', params: { userId: 123 }});//params方式 这里的name值是在定义route.js时中的name
   //this.$router.push({ path: '/register', query: { userId: 123 }});  //query方式 
  }
 }
}
</script>
<style>
</style>

组件(接收参数)

<template>
 <div>
  {{this.$route.params.userId}}或者{{this.$route.params.userId}}
 </div>
</template>
<script>
</script>

总结

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

Javascript 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
Javascript进制转换实例分析
May 14 Javascript
JQuery工具函数汇总
Jun 15 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 #Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 #Javascript
在Vue 中使用Typescript的示例代码
Sep 10 #Javascript
ES6使用export和import实现模块化的方法
Sep 10 #Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 #Javascript
浅谈微信小程序flex布局基础
Sep 10 #Javascript
微信小程序文章详情页面实现代码
Sep 10 #Javascript
You might like
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python timestamp和datetime之间转换详解
2017/12/11 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python求质数列表的例子
2019/11/24 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
jupyter 添加不同内核的操作
2021/02/06 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
项目合作协议书
2014/04/16 职场文书
毕业生工作求职信
2014/06/30 职场文书
生物学专业求职信
2014/07/23 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS