1. 路由模式
路由有兩種模式，分別是hash模式（默認(rèn)） 和 history模式
hash模式，使用的是錨鏈接的原理實(shí)現(xiàn)路由的跳轉(zhuǎn)，這種方式兼容性非常好；缺點(diǎn)是路徑帶有#號(hào)，不夠美觀。
history模式，使用的是瀏覽器中內(nèi)置的history對(duì)象實(shí)現(xiàn)路由的跳轉(zhuǎn)，這種方式不兼容老版本的瀏覽器，刷新后會(huì)丟失路由信息。
在路由實(shí)例中mode屬性來配置路由模式
const router = new VueRouter({
//hash
mode:"hash",
routes
})
2. 路由元信息
meta選項(xiàng)，用于配置路由的元信息，里面的內(nèi)容是自定義的，用于配置路由的數(shù)據(jù)
{
path:'/',
name:'home',
meta:{
title:'首頁'
},
// 路由組件懶加載
component:()=>import('../pages/Home.vue'),
}
前置守衛(wèi)
to表示到哪
from表示從來自哪里
next()繼續(xù)向下執(zhí)行
router.beforeEach((to,from,next)=>{
//通常：在這里會(huì)做一些權(quán)限驗(yàn)證操作
}
后置守衛(wèi)
router.afterEach((to,from)=>{
//更改每個(gè)頁面的標(biāo)題
document.title=to.meta.title
})
我們?cè)谇昂笫匦l(wèi)的to參數(shù)中可以獲取到我們?cè)?code>meta中設(shè)置的值。
路由守衛(wèi)我們通常來判斷用戶是否登錄，是否滿足條件訪問指定的頁面
3. nprogress加載進(jìn)度條
安裝
npm install nprogress
導(dǎo)入
// 導(dǎo)入nprogress
import NProgress from "nprogress";
// 導(dǎo)入nprogress的樣式
import "nprogress/nprogress.css";
在前置守衛(wèi)中開啟加載進(jìn)度條
開啟loading
NProgress.start();
在后置守衛(wèi)中關(guān)閉加載進(jìn)度條
結(jié)束loading
NProgress.done();
4. 二級(jí)路由
//配置子路由信息
children:[
//手機(jī)訂單路由
{
path:'phoneOrder',
name:'phoneOrder',
meta:{
title:'手機(jī)訂單'
},
component:()=>import(/* webpackChunkName: "b" */'../pages/Order/PhoneOrder.vue')
}
]
5. 路由懶加載 和 路由分組懶加載
路由懶加載
component:()=>import('../pages/Home.vue')
路由懶加載,我們不采用import 組件名 from ' '方式來導(dǎo)入組件
采用一個(gè)方法返回一個(gè)組件路徑
好處：提高首頁的加載速度
路由緩存
keep-alive組件
keep-alive用于緩存路由組件，默認(rèn)情況下會(huì)緩存打開的所有組件，如果需要指定緩存哪些組件，通過include屬性指定。
<keep-alive :include="['newsGn','newsGj']">
<router-view></router-view>
</keep-alive>
:include屬性是個(gè)數(shù)組的形式綁定，綁定的名稱是每個(gè)組件中name的名稱
路由組件特有的兩個(gè)生命周期
當(dāng)我們使用路由緩存時(shí)，我們?cè)谔D(zhuǎn)頁面的時(shí)候，每個(gè)頁面的數(shù)據(jù)不會(huì)被清除，但是造的的影響是，使用路由緩存的組件，生命周期函數(shù)在頁面跳轉(zhuǎn)的時(shí)候，只會(huì)執(zhí)行一次，比如created和mounted這個(gè)兩個(gè)周期函數(shù)，這個(gè)時(shí)候我們會(huì)使用路由特有的兩個(gè)生命周期函數(shù)
路由組件激活狀態(tài)生命周期函數(shù)
activated(){}
路由組件失活狀態(tài)生命周期函數(shù)
deactivated(){}
