vue路由导航守卫

vue路由导航守卫：导航守卫通俗来说就是utr跳转的监听，当a跳转到b的过程执行的函数

导航守卫的使用方法

首先定义个实例，然后在使用实例调用钩子函数

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

})

to和from里面包含的信息

fullPath: "/HelloWorld?name=linlin&age=3"

hash: ""

matched: [{…}]

meta: {title: "你好世界"}

name: undefined

params: {}

path: "/HelloWorld"

query: {name: "linlin", age: "3"}

全局路由导航守卫

beforeEach：前置钩子函数，在路由跳转之前执行的函数 ，必须要有next（函数）

afterEach：后置钩子，在路由跳转玩执行

beforeResolve：同beforeEach

组件路由导航守卫

beforeRouteEnter(to,from,next){// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建},

beforeRouteUpdate(to,from,next){// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},

beforeRouteLeave(to,from,next){// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}

路由独享的守卫

beforeEnter  必须包含next()函数才能执行跳转执行后面的页面