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

創(chuàng)新互聯(lián)專注于杞縣企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設公司,商城網(wǎng)站制作。杞縣網(wǎng)站建設公司,為杞縣等地區(qū)提供建站服務。全流程按需設計網(wǎng)站，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

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

毫無疑問，vue-router很適合這樣的需求，實現(xiàn)起來也并不復雜：

1、main.js：

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

2、定義（路由）組件：

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

這里的組件也可以從外部導入，說起來應該是正確的做法，博主為了演示方便才直接寫在里面了...

3、定義路由：

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

注意，最后設置了一個重定向路由，目的是當路徑不屬于以上任意一個時，匹配到‘新歌'頁面；說白了也就是設置初始頁的路由。

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

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

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

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

navBar.vue：

在組件頁面上，按照常理應該分別寫出具體數(shù)目的導航標簽，類似下面這樣：

<router-link to="/新歌">新歌</router-link>
<router-link to="/排行">排行</router-link>
<router-link to="/榜單">榜單</router-link>
<router-link to="/歌手">歌手</router-link>

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

萬一今后碰到十幾、二十個怎么辦？

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

<span v-for="(bar, index) in title" :key="index">
 <router-link to="">
 {{ bar }}
 </router-link>
</span>

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

由于每個都會渲染成不同出口，所以不能寫成絕對路徑。

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

實際操作下來發(fā)現(xiàn)并不可取，因為在html中只會識別to=“”中雙引號內(nèi)的內(nèi)容，更不能使用‘+'這類js才能識別的拼接符號。

方案二：使用編程式導航，

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

<span v-for="(bar, index) in title" :key="index">
 <router-link to="" @click.native="linkChange(bar)">
 {{ bar }}
 </router-link>
</span>

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

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

這里是個很典型的router-link的小坑，因為瀏覽器會把router-link渲染成a標簽，那么在router-link上添加的事件都會失效。

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

但這種方式也有個很嚴重的BUG，即在遍歷中使用編程式導航，會導致所有入口響應這個點擊事件！

具體說來就是當用戶點擊某個路由，所有的入口都會被vue識別為選中路由，頁面邏輯可能看不出來，

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

一起變色！

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

所以此方案也只能放棄。

方案三：

在html中綁定to屬性，

<span v-for="(bar, index) in title" :key="index">
 <router-link :to="{ path: '/'+bar }">
 {{ bar }}
 </router-link>
</span>

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

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

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

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

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

提高用戶體驗。那么使用.router-link-active改變a標簽顏色是最方便的了，問題是上一級的span該如何添加樣式呢？

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

代碼如下：

<router-link tag="span" :to="{ path: bar }" v-for="(bar, index) in title" :key="index">
  <a>
  {{ bar }}
  </a>
 </router-link>

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

不需要使用額外標記也能完成樣式需求。

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前標題：vue路由如何遍歷生成復數(shù)router-link-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://www.chinadenli.net/article36/dhecsg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、靜態(tài)網(wǎng)站、微信公眾號、面包屑導航、企業(yè)網(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)