vue使用动态路由，参数不同

1、代码内容

html定义内容,跳转的路径为/foo/1和/foo/2

JS内vue路由配置使用动态路

Foo组件内容

2、浏览器运行调试内容

当页面上点击【/foo/1】使用初次跳转，Foo组件的 生命周期钩子created调用，打印this.$route日志

再次点击【/foo/2】时，生命周期钩子created没有调用

上述情况说明，因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效，所有原来的组件实例会被复用。

3、怎么解决组件复用？或者怎么知道路由变化了进行一些响应操作？

①、使用key定义

    <router-view>标签定义key值，key值为唯一值（可以用路由路径，可以用随机值）

②、使用watch进行监听$route变化，做出响应

    在Foo组件内定义watch进行监听（to,即将要进入的目标，from当前导航正要离开的路由），通过得到监听到的值进行某些操作。

③、使用beforeRouteUpdate导航守卫

    在Foo组件内容定义导航守卫（to,即将要进入的目标，from当前导航正要离开的路由，next()进行管道中的下一个钩子）。通过得到导航守卫得到的值进行某些操作。