vue2.0 vue-cli项目中路由之间的参数传递

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中会携带这些参数