1.首先配置路由,

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: require('../components/home.vue'),
      children: [
        {
          path: 'user',
          name: 'user',
          component:  require('../components/user/user.vue'),
        },
      ]
    },
    {
      path: '/login',
      name: 'login',
      component:  require('../components/login/login.vue'),
    }
  ]
})

2. 假设从login页面跳转到home页面,需要传递userName参数

  那么login.ts中:

    this.$router.push({
                        path:'/',
                        query: {
                            userName: this.loginForm.username
                        }
        });

  home.ts中接收参数:

 this.userName = this.$route.query.userName

假设从home页面跳转到user子路由,需要传递UserRoleType 和 solutionID两个参数

  home.ts中:

   this.$router.push({
        path:'user',
        query:{
          userRoleType: this.userRoleType,
          solutionID: this.selectedSolutionID
        }
      });

  user.ts中接收参数:

    this.UserRoleType = Number(this.$route.query.userRoleType);
    this.solutionID = Number(this.$route.query.solutionID);

注意:1. 不管传不传参数,步骤一中路由配置是不变的。2. 这样传递的参数会反映到url中,即url中会携带这些参数

vue2.0 vue-cli项目中路由之间的参数传递的更多相关文章

  1. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  2. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  3. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  4. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  5. vue项目中路由验证和相应拦截的使用

    详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/ ...

  6. 【数据售卖平台】—— Vue2.0入门学习项目爬坑

    前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...

  7. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  8. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

随机推荐

  1. [USACO11OPEN]奶牛跳棋Cow Checkers(博弈论)

    题目描述 One day, Bessie decides to challenge Farmer John to a game of 'Cow Checkers'. The game is playe ...

  2. CSRF的原理和防范措施

    a)攻击原理: i.用户C访问正常网站A时进行登录,浏览器保存A的cookie ii.用户C再访问攻击网站B,网站B上有某个隐藏的链接或者图片标签会自动请求网站A的URL地址,例如表单提交,传指定的参 ...

  3. linux系统基础之---账号管理(基于centos7.4 1708)

  4. 针对angularjs下拉菜单第一个为空白问题处理

          angularjs 的select的option是通过循环造成的,循环的方式可能有  ng-option  或 者 <option  ng-repeat></option ...

  5. cors(Cross-origin resource sharing)跨域资源共享

    阮一峰老师的文章(http://www.ruanyifeng.com/blog/2016/04/cors.html)跨域资源共享详解和https://developer.mozilla.org/zh- ...

  6. 吐血分享:QQ群霸屏技术教程之霸屏实施细则

    小号,再不养,成本抗不住了;QQ群,再不玩,真的就玩不动啦. 霸屏系列,坚持下来差不多10来篇,最近更新的几篇,算是霸屏系列的更新版,毕竟相当的规则变动了. 经营自己,是一种前瞻能力,霸屏十篇,有多少 ...

  7. SQL命令(三)

    数据完整性约束 1)数据完整性约束包含:实体完整性.参照完整性.用户定义完整性. CREATE TABLE table( id INT NOT NULL AUTO_INCREMENT PRIMARY ...

  8. jmeter测试报告优化

    1.下载jmeter.results.shanhe.me.xsl 将该文件拷贝到jmeter\extras目录下 2.修改jmeter.results.shanhe.me.xsl 这里直接拷贝 jme ...

  9. 【Python让生活更美好01】os与shutil模块的常用方法总结

    Python作为一种解释型的高级语言,脚本语言,又被称作“胶水语言”,就是因为其灵活的语法和其依靠浩如烟海的第三方包实现的丰富多彩的功能,而os和shutil就是这样一种功能强大的模块,可以非常快捷地 ...

  10. WebSocket 的使用

    Java 控制台程序实现类似广播功能 服务器端代码 添加 maven 依赖 <dependency> <groupId>javax.websocket</groupId& ...