溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
正常路由嵌套是沒有問題的，但是如果你已經在當前主路由頁面了，然后再次點擊主路由就會出現頁面數據空白的情況
看代碼：
//主路由通過v-for循環出來
<div class="list-group">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="doNothing" class="list-group-item" v-if="getPages.length != 0">數據統計</a>
<router-link v-for="page in getPages" class="list-group-item" :to="page.pageUrl">{{page.pageName}}</router-link>
</div>
//次路由通過URL拼接的方式導航到子路由頁面
<div class="panel-body tabs-wrap">
<!--navtabbar begin-->
<ul class="nav nav-tabs" v-if="isTencentPerson()">
<router-link :to="{ name: 'statistics1',params:{showPanel:false} }" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >統計1</a></router-link>
<router-link :to="{ name: 'statistics2' ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >統計2</a></router-link>
<router-link :to="{ name: 'statistics3' ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >統計3</a></router-link>
</ul>
<!--navtabbar end-->
<!--內容 begin-->
<router-view></router-view>
</div>
子路由JS：
exprot default{
mounted() {
this.routerHop();
},
updated() {
//當前頁再次點擊主路由時重新判斷跳轉
var url = this.$route.path;
if (url === "/statistics/dataStatistics") {
this.routerHop();
}
},
methods: {
//權限判斷
isPerson() {
let user = this.$store.state.user.userInfo;
if (user.userType == 1) {
return true
}
return false;
},
routerHop(){
// 客戶賬號登錄只顯示錯誤統計分析頁面
if(this.isPerson() === false){
return router.push({name: 'statistics1', params: {showPanel: false}});
}
router.push({name: 'statistics3', params: {showPanel: false}}); },
}
}
}
因為已經在當前子路由頁面，當再次點擊主路由導航時，無法觸發mounted鉤子。通過updated這個鉤子函數可以讓再次找到對應子路由，從而解決再次點擊主路由頁面空白的bug。
總結
以上所述是小編給大家介紹的vue 路由嵌套高亮問題的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
