Vue-Router动态路由复用组件时的响应方式

使用Vue-Router动态路由复用组件时，对于无法使用组件的生命周期钩子来请求数据的解决方式

问题描述

以代码为例,我有一个 article 组件，对于所有 page 各不相同的用户，全都映射到这个组件中渲染。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">

  <router-link :to="{name:'articlelink',params:{page:'1'}}"> 文章1 </router-link>
  <router-link :to="{name:'articlelink',params:{page:'2'}}"> 文章2 </router-link>
  <router-link :to="{name:'articlelink',params:{page:'3'}}"> 文章3 </router-link>
 
  <router-view></router-view>
</div>

我在vue-router的路由路径中使用“动态路径参数”来达到这个效果（一个“路径参数”使用冒号: 标记，如:page,使其成为一个变量。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。于是，我们可以更新 article 的模板，输出当前page）

let article = { 
	template: '<div>我是第 {{$router.params.page}} 篇文章</div>' ;

	created(){
		alert('发起请求获取第'+ this.$router.params.page +'的数据')
	}
}

//路由和组件的映射表
let routes = [ 
  { path: '/article/:page',name:'articlelink', component: article }
]

//实例化路由对象
const router = new VueRouter({
    routes: routes
})


const app = new Vue({
  el:'#app',
  router,
})

但这里有一个问题，当使用路由参数时，例如从 /article/1 导航到 /article/2，原来的组件实例会被复用。虽然两个路由都渲染同个组件，显得更加高效。但也由于组件组件实例是被复用，不是重创建的，因此其内的生命周期钩子created不会再被调用，造成无法更新数据的情况。

解决方式一 watch 监测变化

vue-router官网给出的解决的方式是在复用组件时，使用 watch 监测 $route 对象，从而对路由参数的变化作出响应。如

let article = { 
	template: '<div>我是第 {{$router.params.page}} 篇文章</div>' ;

	watch:{
		$router(){
			alert('发起请求获取第'+ this.$router.params.page +'的数据')
		}
	}
}