vue 组件传参与命名路由

路由组件传参

上面代码使用 $route.params 获取了路由中传递的参数，但是耦合度较高，不够灵活，可以使用 props 将组件和路由解耦。

props 值为布尔类型

当 props 的值为布尔类型时，代表使用 : 捕获的属性可以传递给模板中使用，同样的模板中使用 props 数组进行接受。如下代码所示：

路由组件：

const user = {
  props: ['id'],
  template: `<h1>你好用户 {{ id }}</h1>`
}

路由对象：

const router = new VueRouter({
  routes: [
    // 设置 props 属性为 true 表示允许将 id 向组件中传递
    { path: '/user/:id', component: user, props: true }
  ]
})

上面代码中仅仅接受了一个参数，如果要匹配路由中的多个参数，可以这样：

{ path: '/desc/:id/:name/:age', component: desc, props: true },

上面代码中接受了三个参数：id、name、age。

Vue 实例：

let vm = new Vue({
  el: '.container',
  router
})

HTML：

<div class="container">
  <router-link to="/user/1">用户1</router-link>
  <router-link to="/user/2">用户2</router-link>
  <router-link to="/user/3">用户3</router-link>
  <router-view></router-view>
</div>

结果：

props 值为对象类型

有时仅仅传递捕获到的参数是不够的，还需要手动传入一些数据，这时就需要将 props 设置为一个对象。如下代码所示：

路由组件

const user = {
  props: ['name', 'age'],
  template: `<h1>你好用户 {{ name }}，年龄：{{ age }}</h1>`
}

路由对象：

const router = new VueRouter({
  routes: [
    // 设置 props 属性为 true 表示允许将 id 向组件中传递
    { path: '/user/:id', component: user, props: { name: '小明', age: 18 } }
  ]
})

结果：

props 为函数类型

上面代码运行结果可以看到，由于将数据写死了，捕获不到参数了，将 props 设置为函数类型可以很好的解决这种问题。

路由组件：

const user = {
  props: ['name', 'age', 'id'],
  template: `<h1>你好用户 {{id}} {{ name }}，年龄：{{ age }}</h1>`
}

路由对象：

const router = new VueRouter({
  routes: [
    // 设置 props 属性为 true 表示允许将 id 向组件中传递
    { path: '/user/:id', component: user, props: route => { return { uname: '小明', 
age: 20, id: route.params.id } } }
  ]
})

结果：

命名路由

为了各个路由之间更容易区分，可以为每个路由设置一名名称，在路由规则中使用 name 属性来定义。如果想要传递参数，还需要设置 params 属性，属性值为对象，对象中包含了要传递的参数。如下代码所示：

HTML

<div class="container">
  <router-link to="/user/1">用户1</router-link>
  <!-- 
    v-bind 指令中绑定了一个对象，
    name 属性设置了使用的命名路由，
  -->
  <router-link :to="{name: 'user', params: {id: 2} }">用户2</router-link>
  <router-link to="/user/3">用户3</router-link>
  <router-view></router-view>
</div>

路由对象：

const router = new VueRouter({
  routes: [
    {
      // 为路由设置名称，在使用时，使用 v-bind 指令绑定to属性，属性值为对象
      name: 'user',
      path: '/user/:id',
      component: user,
      props: route => { return { name: '小明', age: 20, id: route.params.id } }
    }
  ]
})

结果：