Vue Router簡(jiǎn)介
- 它是一個(gè)Vue.js官方提供的路由管理器。是一個(gè)功能更加強(qiáng)大的前端路由器谷婆，推薦使用慨蛙。
- Vue Router和Vue.js的核心深度集成，因此非常契合纪挎，可以一起方便的實(shí)現(xiàn)SPA單頁(yè)應(yīng)用程序的開(kāi)發(fā)期贫。
- Vue Router依賴(lài)于Vue，所以需要先引入Vue异袄，再引入Vue Router
Vue Router的特性：
- 支持H5歷史模式或者h(yuǎn)ash模式
- 支持嵌套路由
- 支持路由參數(shù)
- 支持編程式路由
- 支持命名路由
- 支持路由導(dǎo)航守衛(wèi)
- 支持路由過(guò)渡動(dòng)畫(huà)特效
- 支持路由懶加載
- 支持路由滾動(dòng)行為
Vue Router的使用步驟(★★★)
<script src="./js/vue.js"></script>
<script src="./js/vue-router_3.0.2.js"></script>
在html中
- A.導(dǎo)入js文件和為全局window對(duì)象掛載VueRouter構(gòu)造函數(shù)
<script src="./js/vue.js"></script>
<script src="./js/vue-router_3.0.2.js"></script>
- B.添加路由鏈接 <router-link>是vue中提供的標(biāo)簽通砍，默認(rèn)會(huì)被渲染為a標(biāo)簽， to屬性默認(rèn)被渲染為href屬性隙轻， to屬性的值會(huì)被渲染為#開(kāi)頭的hash地址
<a href='#user'>user</a>
<router-link to="/user">User</router-link> //與a標(biāo)簽等效
<router-link to="/login">Login</router-link>
對(duì)應(yīng)關(guān)系：
- C.添加路由填充位（路由占位符） 最后路由展示的組件就會(huì)在占位符的位置顯示
<component></component>
<router-view></router-view> //與上邊等效
在js中：
- D.定義路由組件
#定義組件
var User = {
template:"<div>This is User</div>"
}
var Login = {
template:"<div>This is Login</div>"
}
- E.配置路由規(guī)則并創(chuàng)建路由實(shí)例,類(lèi)似于Vue實(shí)例
var myRouter = new VueRouter({
//routes是路由規(guī)則數(shù)組
routes:[
//每一個(gè)路由規(guī)則都是一個(gè)對(duì)象埠帕，對(duì)象中至少包含path和component兩個(gè)屬性
//path表示 路由匹配的hash地址，component表示路由規(guī)則對(duì)應(yīng)要展示的組件對(duì)象
{path:"/user",component:User},
{path:"/login",component:Login}
]
})
- F.將路由掛載到Vue實(shí)例中
var vm = new Vue({
el:'#app',
//通過(guò)router屬性?huà)燧d路由對(duì)象
router:myRouter
})
補(bǔ)充：
路由重定向：可以通過(guò)路由重定向?yàn)轫?yè)面設(shè)置默認(rèn)展示的組件 在路由規(guī)則中添加一條路由規(guī)則即可玖绿，如下：
var myRouter = new VueRouter({
//routes是路由規(guī)則數(shù)組
routes: [
//path設(shè)置為/表示頁(yè)面最初始的地址 / ,redirect表示要被重定向的新地址敛瓷，設(shè)置為一個(gè)路由即可
{ path:"/", redirect:"/user"},
{ path: "/user", component: User },
{ path: "/login", component: Login }
]
})
那么一個(gè)用VueRouter的搭建的小案例實(shí)現(xiàn)了
運(yùn)行：
默認(rèn)顯示頁(yè)面：
點(diǎn)擊login：
嵌套路由的概念
當(dāng)我們進(jìn)行路由的時(shí)候顯示的組件中還有新的子級(jí)路由鏈接以及內(nèi)容。
嵌套路由最關(guān)鍵的代碼在于理解子級(jí)路由的概念： 比如我們有一個(gè)/login的路由 那么/login下面還可以添加子級(jí)路由斑匪，如:
- /login/account
- /login/phone
<body>
<div id="app">
<!-- 路由鏈接 -->
<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>
<!--占位符 -->
<router-view></router-view>
</div>
<!-- login的模板 -->
<template id="login">
<div>
<h1>This is Login</h1>
<hr>
<router-link to="/login/account">賬號(hào)密碼登錄</router-link>
<router-link to="/login/phone">掃碼登錄</router-link>
<router-view></router-view>
</div>
</template>
<script>
//定義組件
var User = {
template:"<div>This is User</div>"
}
var Login = {
template:'#login'
}
//定義login子路由的組件
var account = {template: "<div>賬號(hào)：<input><br>密碼：<input></div>"};
var phone = {template: "<h1>掃我二維碼</h1>"};
//路由實(shí)例
var myRouter = new VueRouter({
//routes是路由規(guī)則數(shù)組
routes:[
{ path:"/", redirect:"/user"},
{path:"/user",component:User},
{
path:"/login",
component:Login,
//定義子路由
children: [
{path: "/login/account", component: account},
{path: "/login/phone", component: phone},
]
}
]
})
var vm = new Vue({
el:'#app',
//通過(guò)router屬性?huà)燧d路由對(duì)象
router:myRouter
})
</script>
</body>
思路：首先用戶(hù)點(diǎn)擊Login時(shí)呐籽，通過(guò)to屬性的值到路由實(shí)例中的定義路由規(guī)則匹配
找到之后通過(guò)component顯示相應(yīng)的組件模板，填充占位符蚀瘸。
結(jié)果顯示：
在該模板中又定義了兩個(gè)路由和一個(gè)占位符狡蝶，當(dāng)用戶(hù)點(diǎn)擊某個(gè)路由后，再次通過(guò)該路由的to屬性到路由規(guī)則數(shù)組中匹配贮勃，(因?yàn)槭亲勇酚商叭牵灾苯釉诟嘎酚傻腸hildren中尋找匹配)
找到后，顯示組件模板寂嘉。填充到占位符中奏瞬。
動(dòng)態(tài)路由
動(dòng)態(tài)路由就是路由鏈接的to屬性的值是動(dòng)態(tài)變化的，
在路由實(shí)例的規(guī)則數(shù)組中進(jìn)行統(tǒng)一獲取,并可以對(duì)該值進(jìn)行操作或顯示到該路由指向的組件模板中泉孩。
<!-- 動(dòng)態(tài)路由 -->
<body>
<div id="app">
<!-- 路由鏈接 -->
<router-link to="/user/22">User</router-link>
<router-link to="/login">Login</router-link>
<!--占位符 -->
<router-view></router-view>
</div>
<script>
//定義組件
var User = {
template:"<div>User is {{ $route.params.id }}</div>"
}
var Login = {
template:"<div>This is Login</div>"
}
//路由實(shí)例
var myRouter = new VueRouter({
//routes是路由規(guī)則數(shù)組
routes:[
//path設(shè)置為/表示頁(yè)面最初始的地址 / ,redirect表示要被重定向的新地址硼端，設(shè)置為一個(gè)路由即可
{ path:"/", redirect:"/user"},
//每一個(gè)路由規(guī)則都是一個(gè)對(duì)象，對(duì)象中至少包含path和component兩個(gè)屬性
//path表示 路由匹配的hash地址寓搬，component表示路由規(guī)則對(duì)應(yīng)要展示的組件對(duì)象
{path:"/user/:id",component:User},
{path:"/login",component:Login}
]
})
var vm = new Vue({
el:'#app',
//通過(guò)router屬性?huà)燧d路由對(duì)象
router:myRouter
})
</script>
</body>
解析：
User的路由鏈接to屬性的值為：
怎么獲取這個(gè)值呢珍昨？，到路由規(guī)則數(shù)組中進(jìn)行匹配：
我們發(fā)現(xiàn)修改他的path值為
'/user/:id'
即可獲取id(id為隨便取的名字，可以為pid镣典，bid等)
怎么在其指向的組件模板中顯示該獲取的id值兔毙？
在模板中通過(guò)插值的方式----{{$router.params.id}}進(jìn)行獲取。
{{$router.params.id}}
運(yùn)行：
點(diǎn)擊User后骆撇，顯示id值
可以在路由對(duì)應(yīng)的組件中使用$route.params.id來(lái)獲取路徑傳參的id參數(shù)值瞒御，但是這種方式不夠靈活。今后可以盡量使用props將組件和路由解耦神郊。
1.通過(guò)props來(lái)接收參數(shù)
html中的路由鏈接不變肴裙，改變路由規(guī)則數(shù)組和定義組件
//定義組件
var User = {
props: ['id'], //使用props接收id參數(shù)
template:"<div>User is {{ id }}</div>"
}
//路由實(shí)例
var myRouter = new VueRouter({
routes:[
//通過(guò)/:參數(shù)名 的形式傳遞參數(shù)
// {path:"/user/:id",component:User},
//如果props設(shè)置為true，route.params將會(huì)被設(shè)置為組件屬性
{path:"/user/:id",component:User,props: true},
]
})
運(yùn)行：
2.還有一種情況涌乳，我們可以將props設(shè)置為對(duì)象蜻懦，直接將靜態(tài)數(shù)據(jù)傳遞給組件進(jìn)行使用。 但是這樣id的值就訪(fǎng)問(wèn)不到了夕晓。
var User = {
props:["username","pwd"],
template:"<div>用戶(hù)：{{username}}---{{pwd}}</div>"
}
var myRouter = new VueRouter({
//routes是路由規(guī)則數(shù)組
routes: [
//通過(guò) /:參數(shù)名 的形式傳遞參數(shù)
//如果props設(shè)置為對(duì)象宛乃，則傳遞的是對(duì)象中的數(shù)據(jù)給組件
{ path: "/user/:id", component: User, props:{username:"jack",pwd:123} },
]
})
可以訪(fǎng)問(wèn)到props的數(shù)據(jù)，但是path中的id訪(fǎng)問(wèn)不到蒸辆。
3.如果既想要獲取路由傳遞的參數(shù)值征炼，又想獲取傳遞的對(duì)象數(shù)據(jù)，那么props應(yīng)該設(shè)置為函數(shù)形式躬贡。
var User = {
props: ['id','username','password'], //使用props接收id參數(shù)
template:"<div>User is--{{username}}---{{password}}---{{ id }}</div>"
}
//路由實(shí)例
var myRouter = new VueRouter({
routes:[
//如果props設(shè)置為函數(shù)谆奥，則通過(guò)函數(shù)的第一個(gè)參數(shù)獲取路由對(duì)象
//并可以通過(guò)路由對(duì)象的params屬性獲取傳遞的參數(shù)
{path:"/user/:id",component:User,props:function(route){
return { username:'lizhao',
password:'123456',
id:route.params.id
}
}
},
]
})
運(yùn)行：
