详解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对象弹出一个层
Mar 26 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 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 discuz 主题表和回帖表的设计
2009/03/13 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python抓取网页图片示例(python爬虫)
2014/04/27 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python join方法使用详解
2019/07/30 Python
Python适配器模式代码实现解析
2019/08/02 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
如何获取Python简单for循环索引
2019/11/21 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
Python with语句用法原理详解
2020/07/03 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
卫校毕业生自我鉴定
2013/10/31 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL