Vue.js - 路由 vue-router 的使用详解2（参数传递）

1，路由列表的参数设置

（1）路由列表的 path 是可以带参数的，我们在路由配置文件（router/index.js）里以冒号的形式设置参数。
（2）下面样例代码中，我在跳转到欢迎页面（/hello）时，带有两个参数：id 和 userName。
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首页组件
import hello from '@/components/hello'  //引入欢迎页组件
//Vue全局使用Router
Vue.use(Router)
export default new Router({
  routes: [ //配置路由，使用数组形式
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index  //映射的组件
      path: '/hello/:id/:userName',
      name: 'hello',
      component: hello
2，参数的传递
（1）如果使用 <router-link> 组件跳转的话，可以这么携带参数：
<router-link to="/hello/123/hangge">跳转到 hello</router-link>
（2）如果使用 js 代码跳转的话，可以这么携带参数：
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首页组件
import hello from '@/components/hello'  //引入欢迎页组件
//Vue全局使用Router
Vue.use(Router)
export default new Router({
  routes: [ //配置路由，使用数组形式
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index//映射的组件
      path: '/hello',
      name: 'hello',
      component: hello
（1）如果使用 <router-link> 组件跳转的话，可以这么携带参数：
<router-link :to="{path:'/hello', query:{id:123, userName:'hangge'}}">
  跳转到 hello
</router-link>
（2）如果使用 js 代码跳转的话，可以这么携带参数：
this.$router.push({
  path:'/hello',
  query:{id:123, userName:'hangge'}
3，参数的获取
页面中通过 $route.query.xxx 获取传递过来的数据。
<template>
    <h1>ID：{{ $route.query.id}}</h1>
    <h1>用户名：{{ $route.query.userName}}</h1>
</template>
4，运行效果 
可以看到点击首页链接进行跳转后，参数是自动拼接到 url 后面进行传递的。
三、使用 params 方式传递参数
1，路由列表
params 方式类似于 post 传参，即传递的参数不会显示在 URL 上。同上面的 query 方式一样，路由列表的 path 不需要配置参数：
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首页组件
import hello from '@/components/hello'  //引入欢迎页组件
//Vue全局使用Router
Vue.use(Router)
export default new Router({
  routes: [ //配置路由，使用数组形式
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index//映射的组件
      path: '/hello',
      name: 'hello',
      component: hello
2，参数的传递
注意：params 只能用 name 来引入路由，而不能用 path。
（1）如果使用 <router-link> 组件跳转的话，可以这么携带参数：
<router-link :to="{name:'hello', params:{id:123, userName:'hangge'}}">
  跳转到 hello
</router-link>
（2）如果使用 js 代码跳转的话，可以这么携带参数：
this.$router.push({
  name:'hello',
  params:{id:123, userName:'hangge'}
3，参数的获取
页面中通过 $route.params.xxx 获取传递过来的数据。
<template>
    <h1>ID：{{ $route.params.id}}</h1>
    <h1>用户名：{{ $route.params.userName}}</h1>
</template>
4，运行效果
可以看到这种方式，参数的传递不会拼接到 url 后面。
附：使用 props 实现参数解耦 
    从上面的样例可以看出，当路由携带参数跳转时，页面这边通过 $route.params.xxx 或 $route.query.xxx 来获取传递过来的数据。但这样有个问题，由于组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
    要解决这个问题，我们可以使用 props 将组件和路由解耦。props 共有如下三种模式。
1，布尔模式
（1）直接将路由配置中的 props 属性被设置为 true，那么参数将会被设置为组件属性。
export default new Router({
  routes: [ //配置路由，使用数组形式
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index  //映射的组件
      path: '/hello/:id/:userName',
      name: 'hello',
      component: hello,
      props: true
 
（2）然后我们页面组件这边不再需要通过 $route.params.xxx 或 $route.query.xxx 来获取传递过来的数据。
<template>
    <h1>ID：{{ id }}</h1>
    <h1>用户名：{{ userName}}</h1>
</template>
<script>
  export default {
    name: 'hello',
    props: ['id', 'userName']
</script>
2，对象模式
（1）我们可以将 props 设置为一个对象，对象内容会被设置为组件属性。这种方式常用来配置静态参数。
export default new Router({
  routes: [ //配置路由，使用数组形式
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index  //映射的组件
      path: '/hello',
      name: 'hello',
      component: hello,
      props: {
        id: 1234,
        userName: "hangge"
 
（2）然后页面组件这边获取数据方式和前面一样。
<template>
    <h1>ID：{{ id }}</h1>
    <h1>用户名：{{ userName}}</h1>
</template>
<script>
  export default {
    name: 'hello',
    props: ['id', 'userName']
</script>
3，函数模式
（1）我们还可以创建一个函数返回 props，在函数中对参数值进行处理，或者将静态值与基于路由的值结合。
function dynamicPropsFunc (route) {
  return {
    message: "欢迎您：" + route.params.userName
export default new Router({
  routes: [ //配置路由，使用数组形式
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index  //映射的组件
      path: '/hello',
      name: 'hello',
      component: hello,
      props: dynamicPropsFunc
 
（2）这里假设我们使用 JS 进行跳转，代码如下： 
this.$router.push({
  name:'hello',
  params:{id:123, userName:'hangge'}
（3）目标页面组件代码，以及运行结果如下：