路由導航守衛

全局導航守衛（璀璨磚石）

全局前置守衛（進）

1.在routers文件夾下建立一個router.js文件，在入口文件（main.js）裏面導入這個文件：

import './routers/router';

2.在router.js導入：

import 'router' from ‘index’

router.beforeEach((to,from,next)=>{

console.log('to',to)//to是目標路由

console.log('from',from)//from是當前路由

next()//next是to和from鏈接的橋樑，參數爲ture，false，

})

全局解析守衛（使用方式和全局前置守衛同樣，新的鉤子）

1.router.beforeResolve

全局後置守衛

1.router.afterEach((to,from)=>{//用來作用戶友好提示信息

if(to.path==='/mine/login'){

confirm('歡迎你')

}

})

路由獨享守衛（不屈白銀）

1.寫在路由表裏面：beforeEnter(to,from,next) {}

組件內守衛（最強王者）

1.組件內前置守衛(數據預載)

<script>

export default {

beforeRouteEnter(to,from,next){

//這個階段沒有this

console.log('beforeRouteEnter')

next()

fetch（‘data.json’）.then(res=>res.json).then(res=>{

next（vm=>{//vm就是當前組件

vm.$set(vm.categorys,'data',data)//vm.categorys是vm裏面的數據，'data'是自定義的數據，data是合併後的數據，此方法底層是object.assign()

}）

})

},

data(){

return{

categoryscategorys:{}

}，

beforeCreate(){

console.log('beforecreate')

}

}

</script>

2.組件內後置守衛（用來作用戶友好提示信息）

<script>

export default {

beforeRouteLeave(to,from,next){

//這個階段有this

if（this.usename）{

next()

}else{

if(confirm('你肯定要離開嗎')){

next（）

}else{

next（false）

}

}

}

}

</script>

3組件內更新守衛（組件發生改變時從新發送請求渲染頁面）

<script>

export default {

beforeRouteUpdata(to,from,next){

//這個階段有this

}

}

</script>