1. 下載安裝vue-router
npm 或者 CDN 官網(wǎng)皆可
2. router 基本配置
// 第一步定義路由與組件之間的映射關(guān)系
let routes = [
{
path: '/',
component: {
template: `
<div>
<h1>首頁(yè)</h1>
</div>
`,
}
},
{
path: '/about',
component: {
template: `
<div>
<h1>關(guān)于我們</h1>
</div>
`,
}
},
];
// 第二步 創(chuàng)建 router對(duì)象 把上一步的配置傳參進(jìn)去
let router = new VueRouter({
routes: routes
})
// 第三步 把 router 對(duì)象放到 vue 實(shí)例中去
new Vue({
el: '#app',
router: router
})
// 第四步 使用 router-link 與 router-view 標(biāo)簽
<div id="app">
<div>
<router-link to="/">首頁(yè)</router-link>
<router-link to="/about">關(guān)于我們</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
// router-link 相當(dāng)于a標(biāo)簽， router-view 是顯示頁(yè)面的容器
這樣一來，點(diǎn)擊鏈接就會(huì)顯示對(duì)應(yīng)的組件。并且地址欄會(huì)發(fā)生變化
3. 傳參以及獲取傳參
第一種傳參方式：
地址欄為：/user/小歐
先在rouer-link 中傳參
<!-- 先在rouer-link 中傳參 -->
<router-link to="/user/小歐">小歐</router-link>
然后在router配置里面接收參數(shù)
{
path: '/user/:name', // :name 表示參數(shù)名
component: {
template: `
<div>
<h1>我叫:{{$route.params.name}}</h1>
</div>
`,
} // $route.params.name 接收參數(shù)
}
第二種傳參方式：
地址欄為：/user/小歐?age=18
{
path: '/about',
component: {
template: `
<div>
<h1>關(guān)于我們</h1>
<h1>我們：{{$route.query.age}}歲了</h1>
</div>
`,
}
}
// $route.query.age 接收參數(shù) 無需在router-link中傳參 只需在 地址欄傳參 ?age=18 這種格式
// 多個(gè)參數(shù)使用 & 分割
4. 子路由
在某個(gè)路由下想要再顯示一層路由
{
path: '/user/:name',
component: {
template: `
<div>
<h1>我叫:{{$route.params.name}}</h1>
<router-link :to="'/user/'+ $route.params.name + '/more'">更多信息</router-link>
<router-view></router-view>
</div>
`
},
children: [
{
path: 'more',
component: {
template: `
<div>
用戶{{$route.params.name}}的詳細(xì)信息
大海法蘭克福健康減肥l大海法蘭克福健康減肥l
大海法蘭克福健康減肥l大海法蘭克福健康減肥l
大海法蘭克福健康減肥l大海法蘭克福健康減肥l
</div>
`
}
}
]
}
只需要在 對(duì)應(yīng)的路由配置中增加 children 選項(xiàng)，跟第一層路由一樣，別忘了在父級(jí)路由上面添加 router-link 與 router-view 標(biāo)簽
5. 手動(dòng)訪問和傳參
添加一個(gè)按鈕
<router-link to="/">首頁(yè)</router-link>
<router-link to="/about">關(guān)于我們</router-link>
<router-link to="/user/小歐">小歐</router-link>
<button @click="surf()">點(diǎn)擊漫游跳轉(zhuǎn)</button>
new Vue({
el: '#app',
router: router,
methods: {
surf: () => {
setTimeout(() => {
router.push('/about') // 使用push方法
}, 2000)
}
}
})
兩秒后跳轉(zhuǎn)到 about 組件
動(dòng)態(tài)的跳轉(zhuǎn)傳參：
{
path: '/user/:name',
name: 'user', // 當(dāng)前路由的名字
component: {
template: `
<div>
<h1>我叫:{{$route.params.name}}</h1>
<router-link :to="'/user/'+ $route.params.name + '/more'">更多信息</router-link>
<router-view></router-view>
</div>
`
},
children: [
{
path: 'more',
component: {
template: `
<div>
用戶{{$route.params.name}}的詳細(xì)信息
大海法蘭克福健康減肥l大海法蘭克福健康減肥l
大海法蘭克福健康減肥l大海法蘭克福健康減肥l
大海法蘭克福健康減肥l大海法蘭克福健康減肥l
</div>
`
}
}
]
}
點(diǎn)擊按鈕執(zhí)行的函數(shù)：
surf: () => {
setTimeout(() => {
router.push('/about')
setTimeout(() => {
router.push({ // 這里傳入一個(gè)對(duì)象 name 為當(dāng)前路由的名字
name: 'user', params: {
name: '小歐'
}
})
}, 2000)
}, 2000)
}
6. 命名視圖
使用多個(gè) router-view ，一個(gè)路由對(duì)應(yīng)多個(gè)路由 視圖 即一個(gè) router-link 對(duì)應(yīng) 多個(gè) router-view
<div>
<router-link to="/">首頁(yè)</router-link>
<router-link to="/about">關(guān)于我們</router-link>
<router-link to="/user/小歐">小歐</router-link>
<button @click="surf()">點(diǎn)擊漫游跳轉(zhuǎn)</button>
</div>
<div>
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view><!-- 首先取名 -->
</div>
{
path: '/about',
components: { // 這里是components
sidebar:{ // 對(duì)象的鍵名就是router-view的name值
template:`
<div>用戶的頁(yè)面一</div>
`
},
content:{
template:`
<div>用戶的頁(yè)面二</div>
`
},
}
},
7. 導(dǎo)航鉤子
說白了就是路由的生命周期函數(shù)，在期間可以做一些驗(yàn)證，判斷是否跳轉(zhuǎn)，實(shí)現(xiàn)路由守衛(wèi)的效果
何為路由守衛(wèi)？路由守衛(wèi)有點(diǎn)類似于ajax的請(qǐng)求攔截器，就是請(qǐng)求發(fā)送之前先給你攔截住做一些事情之后再去發(fā)送請(qǐng)求，同樣這里的路由守衛(wèi)意思差不多；簡(jiǎn)單理解為就是你在進(jìn)路由之前，首先把你攔住，對(duì)你進(jìn)行檢查；這是不是有點(diǎn)中學(xué)門口的保安？進(jìn)來之前攔住，有學(xué)生證就進(jìn)，沒有學(xué)生證就不讓進(jìn)；當(dāng)然，路由守衛(wèi)不僅僅只是在你進(jìn)入之前攔住你，還有其他的鉤子函數(shù)進(jìn)行其他操作；
vue-router一共給我們提供了三大類鉤子函數(shù)來實(shí)現(xiàn)路由守衛(wèi)：
- 全局鉤子函數(shù)（beforeEach、afterEach)
- 路由獨(dú)享的鉤子函數(shù)（beforeEnter）
- 組件內(nèi)鉤子函數(shù)（beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave）
這里只講一下全局函數(shù)：
// 例子
// 進(jìn)入路由前方法勾子
router.beforeEach((to, from, next) => {
console.log(to, '前置第一個(gè)參數(shù)')
console.log(from, '前置第二個(gè)參數(shù)')
console.log(next, '前置第三個(gè)參數(shù)')
/
to 目標(biāo)路由
from 源路由
next 跳轉(zhuǎn)到下一個(gè)路由
*/
//這里暫時(shí)用 localStorage 來簡(jiǎn)單模擬驗(yàn)證權(quán)限
if (window.localStorage.getItem("token")) {
// 如果存在，則直接跳轉(zhuǎn)到對(duì)應(yīng)路由
next();
} else {
// 如果不存在，則跳轉(zhuǎn)到登錄頁(yè)
next('/login');
}
});
8. 理由匹配與元數(shù)據(jù)
路由匹配：
用于對(duì)當(dāng)前路由地址的匹配與驗(yàn)證
// 全局的 導(dǎo)航鉤子函數(shù)
router.beforeEach(function(to,from,next){
var logged_in = false
console.log('to_path',to.path)
console.log('to',to.matched) // 會(huì)打出父級(jí)與子級(jí)路由
if(!logged_in && to.matched.some(function(item){
return item.path.login_in // 只要有一個(gè)匹配就不能登錄
})){
next('/login')
}else{
next()
}
})
元數(shù)據(jù)：
在路由配置項(xiàng)里面添加的數(shù)據(jù)標(biāo)志，以便用于驗(yàn)證檢驗(yàn)是否跳轉(zhuǎn)等功能
{
path: '/about',
meta:{ // 元數(shù)據(jù)
login_in:false
},
components: {
sidebar:{
template:`
<div>用戶的頁(yè)面一</div>
`
},
content:{
template:`
<div>用戶的頁(yè)面二</div>
`
},
}
},
在邏輯中使用
// 全局的 導(dǎo)航鉤子函數(shù)
router.beforeEach(function(to,from,next){
var logged_in = false
console.log('to_path',to.path)
console.log('to',to.matched) // 會(huì)打出父級(jí)與子級(jí)路由
if(!logged_in && to.matched.some(function(item){
return item.path.login_in // 使用元數(shù)據(jù)進(jìn)行邏輯判斷
})){
next('/login')
}else{
next()
}
})
