详解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 相关文章推荐
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
使用JS实现简易计算器
Jun 14 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文件下载类
2006/12/06 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
python使用socket进行简单网络连接的方法
2015/04/29 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
应届生护士求职信
2013/11/01 职场文书
采购部主管岗位职责
2014/01/01 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
幼儿园小班评语
2014/04/18 职场文书
2014年检验科工作总结
2014/11/22 职场文书
鲁迅故居导游词
2015/02/05 职场文书
企业培训简报范文
2015/07/20 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
python 中的jieba分词库
2021/11/23 Python