淺談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）