一志鞍、導(dǎo)航守衛(wèi)
1、全局守衛(wèi)
router.beforeEach
router.beforeEach 很常用街州，比如驗(yàn)證用戶的token等玻孟；
這里需要注意的是，一定要確保調(diào)用next方法面徽，否則鉤子不會(huì)被resolved
2匣掸、全局解析守衛(wèi)
router.beforeresolve
在 2.5.0+ ，新增的全局解析守衛(wèi)霎匈，和router.beforeEach 類似送爸，區(qū)別是 同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由被解析之后，解析守衛(wèi)就被調(diào)用
3袭厂、全局后置鉤子
router.afterEach((to,from)=>{
})
這里的鉤子不會(huì)接受next函數(shù) 也不會(huì)改變導(dǎo)航本身
4、路由獨(dú)享的守衛(wèi)
我們可以在路由的配置文件index.js 上定義beforeEnter 守衛(wèi)
這個(gè)比較常用帖烘，比如在用戶進(jìn)入組件前 驗(yàn)證他的權(quán)限橄杨、或者獲取各個(gè)組件都需要用到的數(shù)據(jù)等
5照卦、組件內(nèi)的守衛(wèi)
beforeRouteEnter历极、beforeRouteUpdate (2.2 新增--因?yàn)閰?shù)或者查詢導(dǎo)致路由的改變不會(huì)觸發(fā) 進(jìn)入或者離開的導(dǎo)航守衛(wèi)趟卸，所以新增了這個(gè)氏义，當(dāng)然也可以使用watch $route 對(duì)象來應(yīng)對(duì)變化) 、 beforeRouteLeave
顧名思義惯悠，這三個(gè)是在組件中使用，其中beforeRouteLeave 比較實(shí)用筒严，比如用戶填寫信息未完成要離開的時(shí)候 我們可以給他警告情萤；
export default {
beforeRouteLeave(to, from, next) {
if (confirm('你確定離開?')) {
next(true)
} else {
next(false) // next 里的false表示 中斷當(dāng)前的導(dǎo)航 如果url改變了 就會(huì)重置到from路由對(duì)應(yīng)的地址
}
},
}
二、路由懶加載技術(shù)
//官方寫法
const app = () => import('@/components/app')
const router = new VueRouter({
routes: [
{ path: '/app', component: app }
]
})
// 簡(jiǎn)寫
const router = new VueRouter({
routes: [
{ path: '/app', component: () => import('@/components/app')}
]
})
三娶视、history模式注意事項(xiàng)
具體可見 vue項(xiàng)目二級(jí)路由刷新后樣式丟失睁宰、錯(cuò)亂的解決方案及手機(jī)端實(shí)時(shí)訪問npm run dev后的項(xiàng)目
四、vue 實(shí)現(xiàn)瀏覽器回退記憶位置的方法
一定要使用history 模式才能實(shí)現(xiàn)
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html
const router = new VueRouter({
mode: 'history',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) { //如果savedPosition存在孝赫，滾動(dòng)條會(huì)自動(dòng)跳到記錄的值的地方
return savedPosition
} else {
return { x: 0, y: 0 }//savedPosition也是一個(gè)記錄x軸和y軸位置的對(duì)象
}
}红符，
routes: [...]
})
五、路由組件傳參
路由組件傳參有三種方式：布爾模式违孝、對(duì)象模式和函數(shù)模式，如下圖（含注釋部分）
，
接下來我們?cè)诮M件中使用this.id/this.objModule/this.funModule調(diào)用即可校坑。
當(dāng)然你也許會(huì)說 干嘛那么復(fù)雜我直接this.$route.params.id就可以拿到路由參數(shù)id了啊千诬，其實(shí)使用props是為了組件與$route進(jìn)行解耦膏斤。
可參考 https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F
另外莫辨，如果網(wǎng)址為http://xxxxxxxx/?query=查詢符值1#/prop/66/name?query=查詢符值2，我們使用this.$route.query得到的是{query:查詢符值2}沮榜，如果想得到查詢符值1，可以使用以下正則：
function getSearchParam(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return '';
}
