小編給大家分享一下如何解決vue-cli 默認路由再子路由選中下的選中狀態(tài)問題，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

周至網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、自適應網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)于2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。

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

因項目需求，需要在默認路由下面的兩個子路由進行切換，當開始以為不就是路由切換？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>

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

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

在經(jīng)過我仔細的查找文檔，終于想到了一種解決方案：在官方文檔里面有一個 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>

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

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

看完了這篇文章，相信你對“如何解決vue-cli 默認路由再子路由選中下的選中狀態(tài)問題”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱：如何解決vue-cli默認路由再子路由選中下的選中狀態(tài)問題
文章URL：http://www.chinadenli.net/article12/ieosgc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、搜索引擎優(yōu)化、動態(tài)網(wǎng)站、域名注冊、手機網(wǎng)站建設、服務器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)