最近在做VUE路由跳轉(zhuǎn)根據(jù)參數(shù)的值不同但是跳轉(zhuǎn)的是同一個路由的功能获诈。點擊左邊的目錄最易，根據(jù)目錄ID跳轉(zhuǎn)不同的列表鳞上。如下圖。
路由跳轉(zhuǎn)的代碼：
this.$router.push({path: '/RFIndex/resourceList', name: '資源列表', params: {id: 2}})
也可以這么寫
this.$router.push({path: '/RFIndex/resourceList', params: {id: 2}})
這兩種其實都可以跳轉(zhuǎn)到想要的路由琳轿。
但是我如果想要根據(jù)id的值不同而去跳轉(zhuǎn)相同的路由，以下是id不同震贵。
this.$router.push({path: '/RFIndex/resourceList', n?params: {id: 2}})
和
this.$router.push({path: '/RFIndex/resourceList', params: {id: 3}})
但是當(dāng)我點擊跳轉(zhuǎn)的時候右邊的列表是沒有刷新的利赋。因為路由沒有變化。雖然數(shù)據(jù)發(fā)生了變化猩系，但是調(diào)用的依然是同一個組件媚送，組件復(fù)用了所以不刷新。所以這時候就要使用不同的路由來跳轉(zhuǎn)寇甸。下面在路由后面添加參數(shù)的值就可以讓路由變化從而重新刷新頁面塘偎。
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',
這樣子點擊左邊目錄的時候拿霉，此時的路由并不是我想要的吟秩，因為根據(jù)id的不同路由始終是:id。
此時加上name屬性绽淘，
this.$router.push({path: '/RFIndex/resourceList/:id', name: '資源列表',params: {id: 3}})
再修改index.js
name: '資源列表',path: '/RFIndex/resourceList',
再點擊目錄訪問頁面涵防，發(fā)現(xiàn)URL正常了，還不是我想要的結(jié)果沪铭。因為就算路由發(fā)生了變化壮池，數(shù)據(jù)還是沒有變化。
因為vue每次調(diào)用組件的時候會觀察是否已經(jīng)created杀怠，而我的組件是已經(jīng)created的椰憋，所以當(dāng)我id發(fā)生變化的時候，組件沒有重新創(chuàng)建赔退。因此要在組件中再加上一個方法橙依。把自己要處理的數(shù)據(jù)寫在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
???? }
}
這樣就可以根據(jù)id的不同跳轉(zhuǎn)路由復(fù)用同一個組件。
