vue全家桶（2.5）

3.8.动态路由匹配和路由组件传参

3.8.1.动态路由匹配

动态路由意味着不固定，具有某种模式，我们希望通过某种匹配方式，把这种不固定的路由形势映射到同一个组件，例如：一个User组件，不同的ID表示不同的用户，即/user/1、/user/2、/user/3，这些不同用户所对应的路由，我们都希望用一个User组件来渲染。vue-router中提供了动态路径参数来实现这种需求，动态路径参数写法:

routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]

这里的id类似于一个变量，id可以是1、2、3等具体的值

路由配置：

routes: [
  {
    path: '/user/:id?',
    component: User
  }
]

如何监听/响应动态参数的变化？

方式1: 使用 beforeRouteUpdate 钩子函数

方式2: 在组件中对 $route 进行 watch（监听）

watch: {
  $route () {
    console.log(this.$route)
  }
}

路由信息对象$route

path   对应当前路由的路径
params  保护动态路由参数
query   url查询参数
hash     当前路由的hash值
fullPath  完整的url路径，包含查询参数和hash
matched  包含当前路由的所有嵌套路径片段的路由记录
name     当前路由的名称

3.8.2.路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性,我们需要做的是通过传参将组件与路由解耦，使得组件的使用更加灵活，这里需要使用到props

路由配置里面我们需要改成这样

routes: [
  {
    path: '/user/:id?',
    component: User,
    props: true
  }
]

在组件中使用props的值

螺钉课堂视频课程地址：http://edu.nodeing.com