小編給大家分享一下vue路由如何遍歷生成復(fù)數(shù)router-link，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司成立與2013年，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元松原做網(wǎng)站,已為上家服務(wù),為松原各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):18982081108

需求：頂部導(dǎo)航欄控制下方內(nèi)容欄，實(shí)現(xiàn)頁(yè)面內(nèi)切換。

毫無(wú)疑問(wèn)，vue-router很適合這樣的需求，實(shí)現(xiàn)起來(lái)也并不復(fù)雜：

1、main.js：

import VueRouter from 'vue-router'
Vue.use(VueRouter);

2、定義（路由）組件：

import songList from './components/songList.vue'
 
const Bar = { template: '
no.2
' }
const Baz = { template: '
no.3
' }
const Fun = { template: '
no.4
' }

這里的組件也可以從外部導(dǎo)入，說(shuō)起來(lái)應(yīng)該是正確的做法，博主為了演示方便才直接寫(xiě)在里面了...

3、定義路由：

const routes = [
 { path: '/新歌',
 component: songList
 },
 { path: '/排行',
 component: Bar
 },
 { path: '/榜單',
 component: Baz
 },
 { path: '/歌手',
 component: Fun
 },
 { path: '*',
 redirect: '/新歌'
 }
]

注意，最后設(shè)置了一個(gè)重定向路由，目的是當(dāng)路徑不屬于以上任意一個(gè)時(shí)，匹配到‘新歌'頁(yè)面；說(shuō)白了也就是設(shè)置初始頁(yè)的路由。

4、創(chuàng)建router實(shí)例：

const router = new VueRouter({
 routes//等價(jià)routes: routes
})

5、創(chuàng)建和掛載根實(shí)例：

new Vue({
 router,
 el: '#app',
 render: h => h(App)
})

navBar.vue：

在組件頁(yè)面上，按照常理應(yīng)該分別寫(xiě)出具體數(shù)目的導(dǎo)航標(biāo)簽，類(lèi)似下面這樣：

新歌
排行
榜單
歌手

但實(shí)際運(yùn)用上有個(gè)小問(wèn)題，就是像這樣重復(fù)樣式的路由入口真的有必要每個(gè)都寫(xiě)一遍么？唯一的區(qū)別僅僅是to屬性不同？

萬(wàn)一今后碰到十幾、二十個(gè)怎么辦？

于是換個(gè)思路，嘗試遍歷數(shù)組來(lái)生成復(fù)數(shù)個(gè)路由入口：

 
 {{ bar }}
 

大致如上，title是一個(gè)所有名目的數(shù)組：[ 新歌，排行，榜單，歌手，... ]，Index索引用來(lái)綁定key值?，F(xiàn)在唯一的問(wèn)題 就是to也就是路由入口路徑該怎么寫(xiě)？

由于每個(gè)都會(huì)渲染成不同出口，所以不能寫(xiě)成絕對(duì)路徑。

方案一：將main.js中的路徑都變成title中的名稱(chēng)，再在to中用拼接字符串實(shí)現(xiàn)動(dòng)態(tài)匹配。

實(shí)際操作下來(lái)發(fā)現(xiàn)并不可取，因?yàn)樵趆tml中只會(huì)識(shí)別to=“”中雙引號(hào)內(nèi)的內(nèi)容，更不能使用‘+'這類(lèi)js才能識(shí)別的拼接符號(hào)。

方案二：使用編程式導(dǎo)航，

methods: {
 linkChange: function (bar) {
  this.$router.push({ path: '/'+bar});
 }
 }


 
 {{ bar }}
 

這種方法將路徑寫(xiě)在methods中就可以使用每次遍歷數(shù)組獲得的值，從而實(shí)現(xiàn)動(dòng)態(tài)匹配。

為什么要給click事件加上native后綴？

這里是個(gè)很典型的router-link的小坑，因?yàn)闉g覽器會(huì)把router-link渲染成a標(biāo)簽，那么在router-link上添加的事件都會(huì)失效。

解決方案就是加上.native后綴來(lái)阻止原生事件。

但這種方式也有個(gè)很?chē)?yán)重的BUG，即在遍歷中使用編程式導(dǎo)航，會(huì)導(dǎo)致所有入口響應(yīng)這個(gè)點(diǎn)擊事件！

具體說(shuō)來(lái)就是當(dāng)用戶(hù)點(diǎn)擊某個(gè)路由，所有的入口都會(huì)被vue識(shí)別為選中路由，頁(yè)面邏輯可能看不出來(lái)，

但只要加個(gè).router-link-active { background: #f4f4f4 }這種vue給當(dāng)前路由默認(rèn)添加的class設(shè)置一個(gè)背景色，就能發(fā)現(xiàn)所有路由入口元素

一起變色！

這個(gè)bug在不使用遍歷，依次給span設(shè)置路由的時(shí)候不會(huì)出現(xiàn)，具體原因希望有大神可以告知。

所以此方案也只能放棄。

方案三：

在html中綁定to屬性，

 
 {{ bar }}
 

想了太多復(fù)雜的方案，反而忽略了最基本的綁定to屬性，

最方便的地方在于，大括號(hào)內(nèi)既可以像我一樣寫(xiě)完整路徑，也可以直接寫(xiě)成：to="{ path: bar }"，效果是一樣的。

而且相比前面的方法，可以省去額外的點(diǎn)擊事件，利用其本身的路徑特性來(lái)完成。

到目前為止，需求可以算是基本完成，但細(xì)節(jié)還能不能更完美一點(diǎn)呢？

就拿這個(gè)例子來(lái)說(shuō)，我們用span標(biāo)簽包裹了渲染成a標(biāo)簽的router-link，有時(shí)候我們想要選中的標(biāo)簽字體變成藍(lán)色，同時(shí)span下面出現(xiàn)藍(lán)色邊框，

提高用戶(hù)體驗(yàn)。那么使用.router-link-active改變a標(biāo)簽顏色是最方便的了，問(wèn)題是上一級(jí)的span該如何添加樣式呢？

似乎不添加額外class或id這種標(biāo)識(shí)是無(wú)法實(shí)現(xiàn)功能的，但我在vue官網(wǎng)上看到這么一句話(huà)：“有時(shí)候我們要讓 "激活時(shí)的CSS類(lèi)名" 應(yīng)用在外層元素，而不是 標(biāo)簽本身，那么可以用 渲染外層元素，包裹著內(nèi)層的原生 標(biāo)簽”。

代碼如下：

  
  {{ bar }}
  
 

使用tag標(biāo)簽改變其渲染元素，包裹a標(biāo)簽。如此一來(lái)，.router-link-active添加span底邊框，.router-link-active a 來(lái)改變字體顏色。

不需要使用額外標(biāo)記也能完成樣式需求。

以上是“vue路由如何遍歷生成復(fù)數(shù)router-link”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！