vue-router从入门到精通之动态路由（三）

这一节，我们讲讲动态路由是如何使用的，动态路由我们也可以理解为路由传参，这样就容易理解了吧

let router = new VueRouter({
  mode: 'history',
  linkActiveClass: 'is-active',
  routes: [{
    path: '/home/:id',
    component: home
  }]
})

这里，上述形式即为动态路由，冒号后面的就是参数，参数可以跟多个。

let router = new VueRouter({
  mode: 'history',
  linkActiveClass: 'is-active',
  routes: [{
    path: '/home/:id/:name',
    component: home
  }]
})

当匹配到一个路由时，参数值会被设置到this.$route.params中，可以在每个组件内使用。得到传入的参数，我们可以在对应的组件中通过$route.params.id来获取，你也可以获取$route.params来看看传过来了什么

<template>
  <div>id为{{ $route.params.id }}</div>
</template>

<script>
export default {
  data () {
    return {}
  },

  methods: {}
}

当使用路由参数时，例如，从/home/1导航到/home/2时，原来的组件实例会被复用。因为两个路由都渲染同个组件，复用比销毁再创建更加高效。这也就导致了组件的生命周期钩子不会再被调用

复用组件时，相对路由参数的变化作出响应的话，可以简单的watch(监测变化)$route对象

export default {
  data () {
    return {
      id: this.$route.params.id
    }
  },
  watch: {
    '$route' (to, from) {
      console.log(to)
      console.log(from)
    }
  }
}