浅谈vue之动态路由匹配

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

基本使用

{
          path: 'newsDetail/:uid',
          name: 'newsDetail',
          component: NewsDetail
        } 

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

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

问题：

　　跳转时页面内容不刷新

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

　　　　解决思路：

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

watch: {
      '$route'() {
        let bean = {uid: this.$route.params.uid};
        this.getNewsDetail(bean);
      }
    },

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