vue项目同路由名称的路径参数变化处理

场景

vue项目路由的路径由参数变量组成，虽然切换路径，但页面并未发生变化

import User from '@/components/User';

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:userId', component: User }
  ]
})

vue-router官方解释

提醒一下，当使用路由参数时，例如从 /user/foo导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

解决方法

1. watch 监听 $route

export default {
	watch: {
		$route(to, from) {
			/* 处理因路由变化而需要响应的事情 */
		}
	}
}

2. 导航守卫处理 beforeRouteUpdate

export default {
	beforeRouteUpdate(to, from, next){
		// react to route changes...
    	// don't forget to call next()
	}
}

注意， 该方法由 2.2 中引入。

辅助参考

结合 provide / inject，可以按需 刷新当前页面组件。