路由的三個(gè)基本概念
- route，它是一條路由验残，由這個(gè)英文單詞也可以看出來(lái)捞附，它是單數(shù)。
- routes 是一組路由您没，就是把每一條路由組合起來(lái)鸟召，形成一個(gè)數(shù)組。
- router 是一個(gè)機(jī)制氨鹏，相當(dāng)于一個(gè)管理者欧募，它來(lái)管理路由。
下面來(lái)簡(jiǎn)單使用一下
下載vue-router庫(kù)：npm install vue-router
創(chuàng)建一個(gè)router文件夾仆抵，在里面創(chuàng)建一個(gè)index.js文件跟继，專(zhuān)門(mén)來(lái)配置路由的相關(guān)信息的文件
導(dǎo)入路由并使用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
創(chuàng)建一個(gè)pages文件夾种冬，創(chuàng)建Home.vue和News.vue頁(yè)面
Home.vue頁(yè)面
<template>
<div>
<h1>首頁(yè)</h1>
</div>
</template>
<script>
export default {
name:'Home'
}
</script>
<style scoped lang='scss'>
</style>
News.vue頁(yè)面
<template>
<div>
<h1>新聞</h1>
</div>
</template>
<script>
export default {
name:'News'
}
</script>
<style scoped lang='scss'>
</style>
在index.js中導(dǎo)入這兩個(gè)頁(yè)面
import Home from '../pages/Home.vue'
import List from '../pages/News.vue'
index.js中創(chuàng)建路由器對(duì)象，一條路由信息就是一個(gè)對(duì)象
export default new VueRouter({
routes:[
{
// 路由路徑
path:'/home',
// 路由名稱(chēng)
name:'home',
// 路由組件
component:Home
},
{
path:'/news',
name:'news',
component:News
}
]
這樣一個(gè)路由器相關(guān)準(zhǔn)備就完成了舔糖，然后在main.js文件中導(dǎo)入路由器對(duì)象,并將路由器對(duì)象傳給Vue實(shí)例
import router from './router'
new Vue({
render: h => h(App),
router
}).$mount('#app')
在App.vue中來(lái)跳轉(zhuǎn)路由
router-link是路由鏈接組件娱两，用于跳轉(zhuǎn)
<router-link to="/home">首頁(yè)</router-link>
也可以用編程式路由來(lái)跳轉(zhuǎn)
<button @click="gotoNews">新聞</button>
router-view是路由視圖組件，用于呈現(xiàn)路由頁(yè)面 金吗，必須要添加十兢，如果不用的話，就無(wú)法顯示要跳轉(zhuǎn)的路由頁(yè)面
<router-view></router-view>
在Vue實(shí)例中添加一個(gè)方法辽聊，這樣做的好處就是可以在挑戰(zhàn)之前做各種驗(yàn)證纪挎， $route返回的是當(dāng)前路由信息,router返回的是當(dāng)前vue實(shí)例里面的路由器對(duì)象,push方法是跳轉(zhuǎn)路由，并將路由地址添加到歷史記錄跟匆，當(dāng)然也可以用replace方法异袄，它是把當(dāng)前地址替換成記錄里面的最近一條地址
gotoNews(){
if(this.$route.path!=='/news'){
this.$router.push('/news')
}
}
之后就可以使用路由來(lái)跳轉(zhuǎn)頁(yè)面了
在配置路由信息中
路由重定向redirect:后面寫(xiě)的是要跳轉(zhuǎn)的地址
redirect:'/home'
路由傳參props:參數(shù)設(shè)置為true時(shí)，表示可接收路由屬性參數(shù)
props:true,
當(dāng)要配置路由元信息時(shí):meta可配置該頁(yè)面標(biāo)題和設(shè)置角色權(quán)限等
meta:{
title:'One',
roles:['admin']
},
二級(jí)路由玛臂，就是在路由信息中配置子路由信息,例如：
{
path: '/one',
name: 'One',
component: ()=>import('@v/One.vue'),
meta:{
title:'One',
roles:['admin']
},
//定義one的二級(jí)路由
children:[
{
path:'nj',
name:'nj',
component:()=>import('../views/city/Nj.vue'),
meta:{
title:'二級(jí)路由'
}
},
{
path:'sz',
name:'sz',
component:()=>import('../views/city/Sz.vue'),
meta:{
title:'二級(jí)路由'
}
}
]
},
路由懶加載:提高首屏加載性能
component: ()=>import('@v/Home.vue'),
配置路由模式：1.hash模式 2.history模式
hash模式烤蜕，使用的是錨鏈接的原理實(shí)現(xiàn)路由的跳轉(zhuǎn)，這種方式兼容性非常好迹冤；缺點(diǎn)是路徑帶有#號(hào)讽营，不夠美觀。
history模式泡徙，使用的是瀏覽器中內(nèi)置的history對(duì)象實(shí)現(xiàn)路由的跳轉(zhuǎn)橱鹏，這種方式不兼容老版本的瀏覽器，刷新后會(huì)丟失路由信息堪藐。
路由前置守衛(wèi)
router.beforeEach((to,from,next)=>{
//獲取瀏覽器的緩存中莉兰，保存的當(dāng)前登錄用戶(hù)的權(quán)限
let role = sessionStorage.getItem('role')
//驗(yàn)證用戶(hù)訪問(wèn)權(quán)限
if(to.meta.roles && to.meta.roles.includes(role)){
// next()方法，表示繼續(xù)向下執(zhí)行
next()
}
路由后置守衛(wèi)
router.afterEach((to,from)=>{
// 配置當(dāng)前頁(yè)的標(biāo)題
document.title = to.meta.title
})
路由緩存
<keep-alive></keep-alive>組件是用來(lái)緩存路由組件的礁竞，在默認(rèn)情況下會(huì)緩存打開(kāi)所有組件糖荒。用法：
<keep-alive :include="['newsGn','newsGj']">
<router-view></router-view>
</keep-alive>
:include是用來(lái)指定緩存指定的頁(yè)面名
路由的兩個(gè)特有的生命周期
1.激活狀態(tài)activated():打開(kāi)這個(gè)組件頁(yè)面
2.失活狀態(tài)deactivated()：關(guān)閉這個(gè)組件頁(yè)面
當(dāng)路由組件采用緩存后，通常都會(huì)配合這兩個(gè)生命周期鉤子
