快捷導(dǎo)航

vue-cli 默認(rèn)路由再子路由選中下的選中狀態(tài)問(wèn)題及解決代碼

更新時(shí)間：2018年09月06日 10:20:57 作者：LHangY

這篇文章主要介紹了vue-cli 默認(rèn)路由再子路由選中下的選中狀態(tài)問(wèn)題及解決代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue-cli是Vue.js官方腳手架命令行工具，我們可以用它快速搭建Vue.js項(xiàng)目，vue-cli最主要的功能就是初始化項(xiàng)目，既可以使用官方模板，也可以使用自定義模板生成項(xiàng)目，而且從2.8.0版本開(kāi)始，vue-cli新增了build命令，能讓你零配置啟動(dòng)一個(gè)Vue.js應(yīng)用。

因項(xiàng)目需求，需要在默認(rèn)路由下面的兩個(gè)子路由進(jìn)行切換，當(dāng)開(kāi)始以為不就是路由切換？so easy！就看一下遇到的問(wèn)題吧！

{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)
},

這路由一看沒(méi)問(wèn)題吧！

<router-link to="/"><p>首頁(yè)</p></router-link>//這是底部的切換路由
//下面兩個(gè)便是首頁(yè)下面的兩個(gè)子路由的跳轉(zhuǎn)了
<li><router-link to="/">熱門</router-link></li>
<li><router-link to="/livenew">最新</router-link></li>

看到上面的代碼是不是沒(méi)有發(fā)現(xiàn)錯(cuò)誤？其實(shí)也的確可以運(yùn)行！而且兩個(gè)子路由切換關(guān)于首頁(yè)的狀態(tài)也是沒(méi)有問(wèn)題的！

但是當(dāng)我切換user路由的時(shí)候發(fā)現(xiàn)，首頁(yè)路由的狀態(tài)依舊是選中狀態(tài) ，這個(gè)讓我很納悶，按理說(shuō)user路由跟首頁(yè)的路由是同級(jí)，不出出現(xiàn)這樣的問(wèn)題。既然出現(xiàn)了，為了工作，只能迎難而上，去解決這個(gè)問(wèn)題。

在經(jīng)過(guò)我仔細(xì)的查找文檔，終于想到了一種解決方案：在官方文檔里面有一個(gè) redirect （重定向） router.vuejs.org/zh/guide/es… 點(diǎn)擊鏈接可以查看官方文檔

既然可以重定向那我就試一下這種來(lái)解決(畢竟上面的代碼和邏輯事再想不出是什么地方出的錯(cuò)誤，還望大神指點(diǎn)一二?。。?

廢話不多說(shuō)，直接先解決后的代碼：

{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)
 }

而關(guān)于路由的跳轉(zhuǎn)也有一些小變化：

<router-link to="/index"><p>首頁(yè)</p></router-link>//這里依舊是底部導(dǎo)航
//這里便是首頁(yè)的兩個(gè)子路由的跳轉(zhuǎn)按鈕了
<li><router-link to="/index/livelist">熱門</router-link></li>
<li><router-link to="/index/livenew">最新</router-link></li>

構(gòu)思：用重定向，規(guī)定默認(rèn)路由跳轉(zhuǎn)到上面 /index 下面默認(rèn)的子路由，再由默認(rèn)的子路由去定向到子路由的 livelist 。（這是在解決問(wèn)題的時(shí)候發(fā)現(xiàn)，非默認(rèn)路由下，子路由切換不會(huì)造成默認(rèn)路由選中不取消的問(wèn)題，而默認(rèn)路由一直會(huì)存在一個(gè) router-link-active的類名，我的選中樣式也是基于它的）

關(guān)于選中時(shí)自定義自己的樣式可以操作.router-link-active 這個(gè)類，而默認(rèn)路由一直存在這個(gè)類，如果沒(méi)有子路由，或者子路由選中不需要顯示父路由也為選中狀態(tài)的情況下，你可以操作.router-link-exact-active這個(gè)類來(lái)寫自己的選中樣式。

總結(jié)

以上所述是小編給大家介紹的vue-cli 默認(rèn)路由再子路由選中下的選中狀態(tài)問(wèn)題及解決代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: