在使用路由参数时，比如从`/our/Xsan`跳转到`/our/foo`，原来的组件实例会被复用。因为这两个路由都是渲染的同一个组件，比起销毁再重建，复用则显得更加高效。不过，这也就意味着组件的生命周期钩子函数将不会被再次调用。
解决办法：
1、监听`this.route`属性。通过判断`to`和`from`来获取更新的数据。
watch:{ "$route":function(to,from){ console.log("to：",to) console.log("from：",from) } }
2、使用导航守卫的`beforeRouteUpdate`方法，也可以获取`to`和`from`，但是这个函数需要调用`next()`,否则页面不会更新。
beforeRouteUpdate: function (to, from, next) { console.log("to：", to) console.log("from：", from) next() }
整体代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>VueRouter-组件复用</title> </head> <body> <div id="app"> <ul> <li> <router-link to="/">首页</router-link> </li> <li> <router-link to="/our/Xsan">我们</router-link> </li> <li> <router-link to="/our/Xsan3333">我们2</router-link> </li> </ul> <router-view></router-view> </div> <script> var index = Vue.extend({ template: "<h1>首页</h1>" }) var our = Vue.extend({ template: "<h1>欢迎,{{$route.params.user}}</h1>", mounted() { console.log(this.$route.params.user) }, // watch:{ // "$route":function(to,from){ // console.log("to：",to) // console.log("from：",from) // } // } beforeRouteUpdate: function (to, from, next) { console.log("to：", to) console.log("from：", from) next() } }) let router = new VueRouter({ routes: [{ path: "/", component: index }, { path: "/our/:user", component: our }, ] }) new Vue({ el: "#app", router: router }) </script> </body> </html>