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。

<template>
  <div>
    <el-button type="primary" @click="pushTo1">按钮1</el-button>
    <el-button type="primary" @click="pushTo2">按钮2</el-button>
    <el-button type="primary" @click="pushTo3">按钮3</el-button>
    <el-button type="primary" @click="pushTo4">按钮4</el-button>
  </div>
</template>

<script>
export default {
  name: 'officeHome',
  data () {
    return {};
  },
  methods: {
    pushTo1 () {
      // 默认为path
      this.$router.push('/view/home');
    },
    pushTo2 () {
      this.$router.push({path: '/view/home'});
    },
    pushTo3 () {
      this.$router.push({name: 'home'});
    },
    pushTo4 () {
      // name 和 path 都有的情况下，以name为准
      this.$router.push({name: 'home', path: '/view/home'});
    }
  }
};
</script>

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

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

Vue组件：officeHome

<template>
  <div>
    <el-button type="primary" @click="pushTo1">按钮1</el-button>
    <el-button type="primary" @click="pushTo2">按钮2</el-button>
    <el-button type="primary" @click="pushTo3">按钮3</el-button>
  </div>
</template>

<script>
export default {
  name: 'officeHome',
  data () {
    return {};
  },
  methods: {
    pushTo1 () {
      this.$router.push({path: '/view/home', query: { username: 'liu', userId: 12 }});
    },
    pushTo2 () {
      this.$router.push({name: 'home', query: { username: 'liu', userId: 12 }});
    },
    pushTo3 () {
      // name 和 path 都有的情况下，以name为准
      this.$router.push({name: 'home', path: '/view/home', query: { username: 'liu', userId: 12 }});
    }
  }
};
</script>

Vue组件：home

<template>
  <div>
    <p>用户名：{{user.username}}</p>
    <p>ID：{{user.userId}}</p>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      user: {
        username: '',
        userId: ''
      }
    };
  },
  mounted () {
    // $router为VueRouter实例，导航到不同URL，使用$router.push
    console.log(this.$router);
    // $route为当前router跳转对象，可以通过  $route.属性名  获取name、path、query、params等
    console.log(this.$route);
    console.log(this.$route.query);
    this.user = this.$route.query;
  }
};
</script>

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

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

Vue组件：officeHome

<template>
  <div>
    <el-button type="primary" @click="pushTo1">按钮1</el-button>
    <el-button type="primary" @click="pushTo2">按钮2</el-button>
    <el-button type="primary" @click="pushTo3">按钮3</el-button>
  </div>
</template>

<script>
export default {
  name: 'officeHome',
  data () {
    return {};
  },
  methods: {
    pushTo1 () {
      // 这种指定了路由的path，没有指定路由的name，会导致params失效
      this.$router.push({path: '/view/home', params: { username: 'liu', userId: 12 }});
    },
    // 使用params传递参数，必须指定Vue组件路由的name属性
    pushTo2 () {
      this.$router.push({name: 'home', params: { username: 'liu', userId: 12 }});
    },
    pushTo3 () {
      // name 和 path 都有的情况下，以name为准
      this.$router.push({name: 'home', path: '/view/home', params: { username: 'liu', userId: 12 }});
    }
  }
};
</script>

Vue组件：home

<template>
  <div>
    <p>用户名：{{user.username}}</p>
    <p>ID：{{user.userId}}</p>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      user: {
        username: '',
        userId: ''
      }
    };
  },
  mounted () {
    // $router为VueRouter实例，导航到不同URL，使用$router.push
    console.log(this.$router);
    // $route为当前router跳转对象，可以通过  $route.属性名  获取name、path、query、params等
    console.log(this.$route);
    console.log(this.$route.params);
    this.user = this.$route.params;
  }
};
</script>

点击按钮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

<template>
  <div>
    <el-button type="primary" @click="pushTo4">按钮4</el-button>
  </div>
</template>

<script>
export default {
  name: 'officeHome',
  data () {
    return {};
  },
  methods: {
    // 使用params传递参数，写完整的带有参数的 path
    pushTo4 () {
      const username = 'liu';
      const userId = '12';
      this.$router.push({path: `/view/home/${username}/${userId}`});
    }
  }
};
</script>

Vue组件：home

<template>
  <div>
    <p>用户名：{{user.username}}</p>
    <p>ID：{{user.userId}}</p>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      user: {
        username: '',
        userId: ''
      }
    };
  },
  mounted () {
    // $router为VueRouter实例，导航到不同URL，使用$router.push
    console.log(this.$router);
    // $route为当前router跳转对象，可以通过  $route.属性名  获取name、path、query、params等
    console.log(this.$route);
    console.log(this.$route.params);
    this.user = this.$route.params;
  }
};
</script>

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

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