详解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 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
Element Alert警告的具体使用方法
Jul 27 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
PHP 危险函数全解析
2009/09/09 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python教程之全局变量用法
2016/06/27 Python
import的本质解析
2017/10/30 Python
python输出决策树图形的例子
2019/08/09 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
什么是lambda函数
2013/09/17 面试题
初任培训自我鉴定
2013/10/07 职场文书
单位成立周年感言
2014/01/26 职场文书
关于期中考试的反思
2014/02/02 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
作文评语怎么写
2014/12/25 职场文书
导师工作推荐信
2015/03/27 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android