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