vue-router实现Vue组件之间传参

1、假设有两个Vue组件，项目路由文件src/router文件夹下的index.js

import Vue from 'vue';
import Router from 'vue-router';
import officeHome from '@/view/officeHome';
import home from '@/view/home';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/officeHome',
      name: 'officeHome',
      component: officeHome
    },
    {
      path: '/view/home',
      name: 'home',
      component: home
    }
  ]
});

2、实现简单的路由跳转------编程式（router.push(...)）

使用 router.push可以导航到不同的 URL。router.push会向 history 栈添加一个新记录，因此，当用户点击浏览器后退按钮时，则回到之前的 URL。

上面四种方式点击实现路由跳转，跳转以后路由地址：

3、编程式（router.push(...)）------query传参

Vue组件：officeHome

Vue组件：home

注意：使用query传参，参数会显示在路由里（/view/home?username=liu&userId=12）

4、编程式（router.push(...)）------params传参，指定路由name

Vue组件：officeHome

Vue组件：home

点击按钮1跳转，得到的params是一个空对象

点击按钮2 和 按钮3 跳转都可以获取到通过params传递的参数

通过指定路由的name，利用params传递参数，参数也会显示在路由里（/view/home/liu/12）

5、编程式（router.push(...)）------params传参，手写完整路由

在项目的路由配置文件中，配置组件home的路由改成如下：

    {
      path: '/view/home/:username/:userId',
      name: 'home',
      component: home
    }

Vue组件：officeHome

Vue组件：home

点击按钮 跳转可以获取到通过params传递的参数

通过手写完整路由，利用params传递参数，参数也会对应显示在路由里（/view/home/liu/12）