Vue-Router - 02 路线匹配

Vue-Router - 02 路线匹配

路径参数匹配模式

//通过这种方式匹配的可以直接拿到 路径参数 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</d