浅谈vue之动态路由匹配

在日常开发过程中，可能会遇到一些类似于新闻详情页的内容，需要把所有详情页映射到同一组件上，这是动态路由匹配的应用场景之一。在使用的过程中，也遇到过一些小坑，此篇做个简要的总结说明：

基本使用

1 {
2           path: 'newsDetail/:uid',
3           name: 'newsDetail',
4           component: NewsDetail
5         }

其中uid是路由参数，在跳转到指定新闻详情页可以通过以下方式：

1 this.$router.push({name: 'newsDetail', params: {uid: this.data.next.uid}});

问题：

　　跳转时页面内容不刷新

　　　　原因：当前组件被复用，组件的生命周期钩子失效

　　　　解决思路：

　　　　　　1、监听$route的变化，在$route监听方法中处理逻辑

1 watch: {
2       '$route'() {
3         let bean = {uid: this.$route.params.uid};
4         this.getNewsDetail(bean);
5       }
6     },

　　　　　　2、在组件生命周期钩子中处理（beforeRouteUpdate）