vue根據參數不同的路由跳轉以及name的作用

 

路由跳轉的代碼：

this.$router.push({path: '/RFIndex/resourceList', name: '資源列表', params: {id: 2}})

也可以這么寫

this.$router.push({path: '/RFIndex/resourceList', params: {id: 2}})

這兩種其實都可以跳轉到想要的路由。

但是我如果想要根據id的值不同而去跳轉相同的路由，以下是id不同。

this.$router.push({path: '/RFIndex/resourceList', n params: {id: 2}})

和

this.$router.push({path: '/RFIndex/resourceList', params: {id: 3}})

但是當我點擊跳轉的時候右邊的列表是沒有刷新的。因為路由沒有變化。雖然數據發生了變化，但是調用的依然是同一個組件，組件復用了所以不刷新。所以這時候就要使用不同的路由來跳轉。下面在路由后面添加參數的值就可以讓路由變化從而重新刷新頁面。

this.$router.push({path: '/RFIndex/resourceList/:id', params: {id: 3}})

和

this.$router.push({path: '/RFIndex/resourceList/:id', params: {id: 2}})

此時還需要修改index.js里面的配置文件，路由后面加上:id

path: '/RFIndex/resourceList/：id',

這樣子點擊左邊目錄的時候，此時的路由並不是我想要的，因為根據id的不同路由始終是:id。

 

此時加上name屬性，

this.$router.push({path: '/RFIndex/resourceList/:id', name: '資源列表',params: {id: 3}})

再修改index.js

name: '資源列表',path: '/RFIndex/resourceList',

再點擊目錄訪問頁面，發現URL正常了，還不是我想要的結果。因為就算路由發生了變化，數據還是沒有變化。

 

因為vue每次調用組件的時候會觀察是否已經created，而我的組件是已經created的，所以當我id發生變化的時候，組件沒有重新創建。因此要在組件中再加上一個方法。把自己要處理的數據寫在next()之后。

beforeRouteUpdate (to, from, next) {

     next()

     this.id = this.$route.params.id if (this.id === 3) {

           this.tableData = tableApi.tableDataLess

      } else {

            this.tableData = tableApi.tableData

     }

}

這樣就可以根據id的不同跳轉路由復用同一個組件。

------------------------------------------------------------------------------

原文  有茶就喝茶 https://www.cnblogs.com/ccplus/p/8535987.html