详解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 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
jquery延迟对象解析
Oct 26 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
react国际化react-intl的使用
May 06 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 DataGrid 实现代码
2009/08/12 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
浅谈Nodejs观察者模式
2015/10/13 NodeJs
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
python字符串中的单双引
2017/02/16 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
高效使用Python字典的清单
2018/04/04 Python
python语言基本语句用法总结
2019/06/11 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
护士思想汇报
2014/01/12 职场文书
运动会邀请函范文
2014/01/31 职场文书
企业安全生产责任书
2014/04/14 职场文书
植树节口号
2014/06/21 职场文书
疾病证明书
2015/06/19 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书