前言
vue.js除了擁有組件開(kāi)發(fā)體系之外，還有自己的路由vue-router。在沒(méi)有使用路由之前，我們頁(yè)面的跳轉(zhuǎn)要么是后臺(tái)進(jìn)行管控，要么是用a標(biāo)簽寫(xiě)鏈接。使用vue-router后，我們可以自己定義組件路由之間的跳轉(zhuǎn)，還可以設(shè)置稍復(fù)雜的嵌套路由，創(chuàng)建真正的spa（單頁(yè)面應(yīng)用）。我之前用vue-cli腳手架寫(xiě)了一個(gè)簡(jiǎn)單的人員管理實(shí)例，現(xiàn)在我們不用腳手架，就用原生的vue來(lái)寫(xiě)，本文也主要是通過(guò)實(shí)例來(lái)講解vue.js+vue-router相關(guān)知識(shí)。
簡(jiǎn)單路由跳轉(zhuǎn)實(shí)例
1.起步
下載vue-router.js，新建項(xiàng)目文件夾命名為router，將下載的vue-router.js放在router/js/路徑下。新建index.html作為主頁(yè)，引入樣式文件，引入兩個(gè)關(guān)鍵的js，vue和vue-router，再在body標(biāo)簽底部引入一個(gè)main.js用來(lái)寫(xiě)vue實(shí)例及配置路由，注意引用順序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首頁(yè)</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<template></template> //組件區(qū)域
<script src="js/main.js"></script>
</body>
</html>
2.定義路由視圖
調(diào)用foot-nav組件，將底部導(dǎo)航組件引入在這里，是因?yàn)閮蓚€(gè)路由頁(yè)面都要用到它
<div id="app">
<router-view></router-view>
<foot-nav></foot-nav>
</div>
知識(shí)點(diǎn):：<router-view>
<router-view>標(biāo)簽相當(dāng)于一個(gè)插槽，用于將匹配到的組件渲染出來(lái)，一個(gè)個(gè)路由定義的組件相當(dāng)于卡，跳轉(zhuǎn)某個(gè)路由時(shí)，該路由下的頁(yè)面就插在這個(gè)插槽中渲染顯示。
一個(gè)組件可以有多個(gè)<router-view>視圖，并用name值去區(qū)分它們，這種多用在網(wǎng)頁(yè)布局方面，如上左主結(jié)構(gòu)，這個(gè)時(shí)候就可以定義三個(gè)<router-view>
示例
<div id="app">
<router-view name="top"></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
<script>
var topCom = Vue.extend({
template: '<div>頂部</div>'
})
var leftCom = Vue.extend({
template: '<div>側(cè)邊欄</div>'
})
var mainCom = Vue.extend({
template: '<div>主頁(yè)</div>'
})
var router = new VueRouter({
routes:[
{
path: '/',
name: 'home',
components:{
top: topCom,
left: leftCom,
main: mainCom
}
}
]
})
var app = new Vue({
el: '#app',
router
})
</script>
再為各個(gè)板塊設(shè)置一下樣式，打開(kāi)瀏覽器查看效果
3.子組件（底部導(dǎo)航）
3.1 創(chuàng)建子組件
人員管理系統(tǒng)分為兩個(gè)模塊，一個(gè)首頁(yè)，一個(gè)管理頁(yè)，兩個(gè)頁(yè)面都需引入一個(gè)公共組件：底部導(dǎo)航。在首頁(yè)index.html中加入以下模板
<template id="footer">
<div class="footer fixed">
<ul>
<li><router-link to="/">首頁(yè)</router-link></li>
<li><router-link :to="{name:'manage',params:{id:1}}">人員管理</router-link></li>
</ul>
</div>
</template>
知識(shí)點(diǎn):：<router-link>
<router-link>標(biāo)簽主要實(shí)現(xiàn)跳轉(zhuǎn)鏈接功能，屬性to='/'即是跳轉(zhuǎn)到path為'/'的路徑（我們等會(huì)得配置路徑為'/'和'/manage'的路由）
router-link除了可以跳轉(zhuǎn)鏈接之外，還可以傳參，可以傳多個(gè)參數(shù)，一般格式為
<router-link to="路由路徑"></router-link>
<router-link :to="{ path:路由路徑}"></router-link>
<router-link :to="{name:'路由命名',params:{參數(shù)名:參數(shù)值,參數(shù)名:參數(shù)值}}"></router-link>
知識(shí)點(diǎn)：this.$router.push
如果不想用<router-link>標(biāo)簽，也可以給需要跳轉(zhuǎn)的地方添加一個(gè)點(diǎn)擊事件，在事件里寫(xiě)this.$router.push方法
this.$router.push('路由路徑')
this.$router.push({name:'路由命名',params:{參數(shù)名:參數(shù)值,參數(shù)名:參數(shù)值}})
3.2 注冊(cè)子組件
在main.js中全局注冊(cè)子組件并且定義vue實(shí)例
Vue.component('foot-nav',{
template: '#footer'
})
var app = new Vue({
el: '#app'
})
4.首頁(yè)及管理頁(yè)組件
4.1 創(chuàng)建首頁(yè)及管理頁(yè)
<template id="index">
<div>
首頁(yè)
</div>
</template>
<template id="manage">
<div>
人員管理
<p>id:{{id}}</p>
</div>
</template>
4.2 注冊(cè)主頁(yè)及管理頁(yè)
var Home = Vue.extend({
template: '#index'
})
var Manage = Vue.extend({
template: '#manage',
data(){
return{
id: ''
}
},
mounted:function(){
this.id = this.$route.params.id
}
})
知識(shí)點(diǎn)：this.$route.params
this.$route指向vue實(shí)例的路由對(duì)象，params是路由傳過(guò)來(lái)的參數(shù)集合
5.定義路由
定義路由router，并引進(jìn)vue實(shí)例中
var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'/manage/:id',
name: 'manage',
component:Manage
}
]
})
var app = new Vue({
el: '#app',
router
})
知識(shí)點(diǎn)：path:'/路徑/:參數(shù)名'
一個(gè)路由要傳參時(shí)，需在path路徑后面添加一個(gè)‘/’并加上冒號(hào)和參數(shù)名
知識(shí)點(diǎn)：路由激活class
vue-router當(dāng)路由處于激活狀態(tài)時(shí)，會(huì)有一個(gè)class類“router-link-active”，我們只需為這個(gè)類添加樣式就可以實(shí)現(xiàn)路由激活狀態(tài)下的樣式編寫(xiě)
接下來(lái)去瀏覽器查看路由跳轉(zhuǎn)效果
6.嵌套路由
有時(shí)我們項(xiàng)目由多層嵌套組件組成，這個(gè)時(shí)候就需要用到嵌套路由
先看下圖例子，我們給manage路由再添加兩個(gè)子路由
6.1 在組件內(nèi)部添加<router-view>
<template id="manage">
<div>
人員管理
<ul>
<li><router-link to="/manage/list">人員列表</router-link></li>
<li><router-link to="/manage/edit">編輯</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
6.2 定義子路由
//構(gòu)建組件
var List = Vue.extend({
template: '<div>人員列表</div>'
})
var Edit = Vue.extend({
template: '<div>編輯</div>'
})
var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'/manage',
name: 'manage',
component:Manage,
//子路由由children表示
children:[
{
path:'list',
name: 'list',
component:List
},
{
path:'edit',
name: 'edit',
component:Edit
}
]
}
]
})
7.路由重定向
未設(shè)置路由重定向時(shí)，當(dāng)我們隨意輸入一個(gè)路徑，會(huì)顯示一片空白或404。為了防止這種現(xiàn)象發(fā)生，我們一般在配置路由時(shí)再定義一個(gè)重定向路由
var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'*',
redirect: '/'
},
]
})
打開(kāi)瀏覽器，隨意輸入一個(gè)未定義的路由查看效果
