vue-cli 預設路由再子路由選中下的選中狀態問題

LHangY發表於2018-09-05
Vue路由

因專案需求，需要在預設路由下面的兩個子路由進行切換，當開始以為不就是路由切換？so easy！想象很豐滿，現實很骨感！那就看一下遇到的問題吧！

{path: '/',component: resolve => require(['@/components/LiveList'],resolve),
    	children:[
        {
    		path:'',
    		name:'livelist',
    		meta:{title:'',index:0},
    		component: resolve => require(['@/components/compts/livelistcom'],resolve)
    	},{
    		path:'livenew',
    		name:'livenew',
    		meta:{title:'',index:1},
    		component: resolve => require(['@/components/compts/livelistnew'],resolve)
    	}]
 },
{
    path:'/user',
    name:'user',
    meta:{title:'使用者',index:4},
    component: resolve => require(['@/components/user'],resolve)
},
複製程式碼

這路由一看沒問題吧！

<router-link to="/"><p>首頁</p></router-link>//這是底部的切換路由
//下面兩個便是首頁下面的兩個子路由的跳轉了
<li><router-link to="/">熱門</router-link></li>
<li><router-link to="/livenew">最新</router-link></li>複製程式碼

看到上面的程式碼是不是沒有發現錯誤？其實也的確可以執行！而且兩個子路由切換關於首頁的狀態也是沒有問題的！

但是當我切換user路由的時候發現，首頁路由的狀態依舊是選中狀態，這個讓我很納悶，按理說user路由跟首頁的路由是同級，不出出現這樣的問題。既然出現了，為了工作，只能迎難而上，去解決這個問題。

在經過我仔細的查詢文件，終於想到了一種解決方案：在官方文件裡面有一個redirect（重定向）router.vuejs.org/zh/guide/es…點選連結可以檢視官方文件

既然可以重定向那我就試一下這種來解決(畢竟上面的程式碼和邏輯事再想不出是什麼地方出的錯誤，還望大神指點一二！！！)

廢話不多說，直接先解決後的程式碼：

    {path:'',redirect: '/index'},
    {path: '/index',component: resolve => require(['@/components/LiveList'],resolve),
    	children:[
        {path:'',redirect:'livelist'},
        {
    		path:'livelist',
    		name:'livelist',
    		meta:{title:'',index:0},
    		component: resolve => require(['@/components/compts/livelistcom'],resolve)
    	},{
    		path:'livenew',
    		name:'livenew',
    		meta:{title:'',index:1},
    		component: resolve => require(['@/components/compts/livelistnew'],resolve)
    	}]
    },
    {
        path:'/user',
        name:'user',
        meta:{title:'使用者',index:4},
        component: resolve => require(['@/components/user'],resolve)
    }複製程式碼

而關於路由的跳轉也有一些小變化：

<router-link to="/index"><p>首頁</p></router-link>//這裡依舊是底部導航
//這裡便是首頁的兩個子路由的跳轉按鈕了
<li><router-link to="/index/livelist">熱門</router-link></li>
<li><router-link to="/index/livenew">最新</router-link></li>
複製程式碼

構思：用重定向，規定預設路由跳轉到上面 /index 下面預設的子路由，再由預設的子路由去定向到子路由的 livelist 。（這是在解決問題的時候發現，非預設路由下，子路由切換不會造成預設路由選中不取消的問題，而預設路由一直會存在一個router-link-active的類名，我的選中樣式也是基於它的）

關於選中時自定義自己的樣式可以操作.router-link-active 這個類，而預設路由一直存在這個類，如果沒有子路由，或者子路由選中不需要顯示父路由也為選中狀態的情況下，你可以操作.router-link-exact-active這個類來寫自己的選中樣式。


相關文章