Vue-Router 路线匹配

路径参数匹配模式

//通过这种方式匹配的可以直接拿到 路径参数 id
const User = {
  name: 'User'
  template: '<div>User</div>',
  mounted() {
    console.log('这是User组件且id为' + this.$route.params.id)
  }
}

const routes = [
  {
    path: '/',
    name: 'Home',
    redirect: '/user'
  },
  { path: '/user/:id', component: User }
]

但是这种模式会有个问题就是，由于渲染的是同一个组件（当使用路由参数时，例如从 /user/foo 导航到 /user/bar），所以VM不选择更新，自然的，生命周期是不会调用的，
并且导航守卫也是不执行的
有一个官方解决方案 watch侦听器

const User = {
  template: '<div>User</div>'
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  },
  mounted() {
    console.log('这是User组件且id为' + this.$route.params.id)
  }
}
/*
或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：
const User = {
  template: '<div>User</div>'
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  },
  mounted() {
    console.log('这是User组件且id为' + this.$route.params.id)
  }
}
*/

如果你有了解过vue-router內部原理，你自然就知道为什么这样做（其实$route和组件参数对象option的data和props都是相应式的数据）
你可能仍然有点疑惑，通过下面的一个例子你就知道了。

const User = {
  name: 'User'
  //请尤为注意这个模板语法 一旦访问的“参数路径”发生变化 /user/foo 导航到 /user/bar
  //是会动态更新的
  template: '<div>User {{$route.params.id}}</div>',
  mounted() {
    //但是这里不会更新
    console.log('这是User组件且id为' + this.$route.params.id)
  }
}

基于这个案例，你应该已经了解了 $route是响应式的，如此，那么一个非常有意思的东西又出现,计算属性也可以使用$ route的值，去动态更新页面，以至于达到更新数据的功能，但是这样不够优雅，仍然推荐侦听器 watch => $route

值得一提的是还有一直参数路径匹配 => ?id=1。但是在路线对象列表是无法体现的

const routes = [
  {
    path: '/',
    name: 'Home',
    //注意这个路径 ? 传参
    redirect: '/user?1'
  },
  //注意注册资源路径
  { path: '/user', component: User }
]
//这种和 /user/:id 在vue-router实现是差不多的 组件不会整体卸载，重建，生命周期不重复执行

那么怎么获取url => ? 传参的值呢

const User = {
  name: 'User'
  template: '<div>User</div>',
  mounted() {
    console.log('这是User组件且id为' + this.$route.query.id)
  }
}

捕获所有路线及其应用之一(404 Not found)

const routes = [
  //注意注册资源路径
  { path: '/user', component: User },
  {
    // 会匹配以 `/user-` 开头的任意路径
    path: '/user-*',
    component: UserQuery
  },
  {
    // 会匹配所有路径
    path: '*',
    name: '404',
    component: NotFindComponent
  } 
]

注意，之前说过路线匹配都是按照数组遍历方式，所以从左到右依次匹配，看路径是否是 /user （可带url的?参数），那就匹配 User 组件
若1未匹配成功，则匹配是否以 /user- 开头，那就匹配 UserQuery 组件
若2仍未匹配成功，则匹配所以路径（一般都是开发者定义好了其它默认路由，无法匹配的的路由就是找不到），那就匹配 NotFindComponent 组件

高级路由匹配模式

vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的文档学习高阶的路径匹配，还有这个例子展示 vue-router 怎么使用这类匹配

附录

学习code 点击查看
上一篇： Vue-Router快速入门
下一篇：Vue-Router之嵌套路线&&动态跳转