vue-router 是 Vue.js 官方的路由插件,它和 vue.js 是深度集成的,適合用于構(gòu)建 SPA 單頁(yè)面應(yīng)用。vue 的單頁(yè)面應(yīng)用是基于路由和組件的,相當(dāng)于傳統(tǒng)頁(yè)面是基于 <a> 標(biāo)簽鏈接和頁(yè)面,路由用于設(shè)定訪問路徑,并將路徑和組件映射起來(lái),這樣就可以實(shí)現(xiàn)通過由 router 來(lái)切換組件(視圖)。
第一步:安裝 vue-router
創(chuàng)建一個(gè)頁(yè)面,安裝引入 vue.js 和 vue-router.js。
這里用最簡(jiǎn)單的方式安裝:把文件都下載到本地,直接引入。
<script src="js/vue2.0.js"></script>
<script src="js/vue-router.js"></script>
第二步:準(zhǔn)備組件
這里我們實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 tab 選項(xiàng)卡,點(diǎn)擊 tab 就可以切換頁(yè)面視圖。
我們先用傳統(tǒng)的 <a> 標(biāo)簽來(lái)編寫,這里我們只展示 html 部分。
<div id="app">
<!-- 左側(cè)導(dǎo)航欄區(qū)域 -->
<div class="nav">
<a>HTML</a>
<a>CSS</a>
<a>JavaScript</a>
</div>
<!-- 右側(cè)內(nèi)容區(qū)域 -->
<div class="content"></div>
</div>
現(xiàn)在我們修改為 vue-router 方式。這里就要介紹 vue-router 給我們提供的兩個(gè)新組件:router-link 和 router-view,router-link 組件用于幫助用戶進(jìn)行視圖導(dǎo)航,也就是我們傳統(tǒng)的 a 標(biāo)簽,a 標(biāo)簽用 href 屬性來(lái)指定導(dǎo)航的目標(biāo)地址,而 router-link 組件則用 to 屬性來(lái)指定目標(biāo)地址。
注意:vue-router 1.0 的導(dǎo)航語(yǔ)法是給 a 標(biāo)簽添加 v-link 屬性。我們這里只介紹 vue-router 2.0 的用法。
router-view 組件負(fù)責(zé)渲染匹配到的視圖組件,也就是渲染 router-link 指向的目標(biāo)地址。
代碼修改如下:
<div id="app">
<!-- 使用 router-link 組件來(lái)導(dǎo)航 -->
<!-- 通過傳入 'to' 屬性指定導(dǎo)航鏈接 -->
<div class="nav">
<router-link to="/html">HTML</router-link>
<router-link to="/css">CSS</router-link>
<router-link to="/js">JavaScript</router-link>
</div>
<!-- 右側(cè)內(nèi)容區(qū)域 -->
<div class="content">
<!-- 匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
</div>
我們用 router-link 來(lái)替換原來(lái)的 a 標(biāo)簽,原來(lái)的 <div class="content"></div> 里面增加了 router-view 組件。
接下來(lái),我們來(lái)編寫 JavaScript 部分的代碼。
首先,我們的導(dǎo)航中有三個(gè)欄目:
- HTML
- CSS
- JavaScript
它們會(huì)導(dǎo)航指向 3 個(gè)對(duì)應(yīng)的視圖組件,下面來(lái)定義 3 個(gè)組件。
const htmlComponent = {
template:`<div>HTML</div>`
}
const cssComponent = {
template:`<div>CSS</div>`
}
const jsComponent = {
template:`<div>JavaScript</div>`
}
語(yǔ)法很簡(jiǎn)單,用 json 對(duì)象的形式定義,至于 template 屬性對(duì)應(yīng)的內(nèi)容,就是將會(huì)被替換渲染到 router-view 組件的內(nèi)容了。
接下來(lái)我們可以直接創(chuàng)建一個(gè) router 實(shí)例,創(chuàng)建實(shí)例的時(shí)候我們需要傳參數(shù) routes 來(lái)進(jìn)行配置,這樣就可以實(shí)現(xiàn)定義它們之間的關(guān)聯(lián)關(guān)系了。
// 創(chuàng)建 router 實(shí)例,并定義導(dǎo)航和組件的映射關(guān)系
const router = new VueRouter({
// 配置 routes
routes: [
// 定義 3 個(gè)導(dǎo)航和組件的映射關(guān)系
{
path:"/html",
component:htmlComponent,
},
{
path:"/css",
component:cssComponent,
},
{
path:"/js",
component:jsComponent,
}
]
})
注意:routes 的值是個(gè)數(shù)組類型,數(shù)組中每個(gè)元素是對(duì)象類型。
最后是創(chuàng)建一個(gè) vue 實(shí)例,創(chuàng)建的時(shí)候通過配置 router 參數(shù)來(lái)注入我們剛剛定義好的 router 路由。
let vm = new Vue({
el: '#app',
router
})
效果如下:
當(dāng)點(diǎn)擊 CSS 導(dǎo)航時(shí),效果如下: