导航守卫的作用：vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。项目中应用场景举例：路由页面跳转时候进行登陆验证；路由跳转判断；有多种机会植入路由导航过程中：全局路由, 单个路由独享的, 或者组件级的。

全局守卫包括：router.beforeEach（是全局前置守卫）、router.beforeResolve（是全局解析守卫）、router.afterEach（是全局后置钩子）,单个路由独享的导航守卫：在路由配置上直接定义 beforeEnter 守卫,组件内守卫包括：在组件内定义路由的导航守卫，有beforeRouteEnter 、beforeRouteUpdate 、beforeRouteLeave

在实际项目中，路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。举个例子，我们通常使用 router.beforeEach 注册一个全局前置守卫用来判断登录的状态：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

let routesArr = [{         path: '/home',         name:"home",         //redirect:"/about",//重定向         //alias: '/index',//别名         component: {         template: `                  这是首页                          `                           }             }, {             path: '/about',             name:'about',             component: {             template: `                              这是关于我们页                          `             }                     }, {             path: '/user/:name', // :name的作用是动态访问一个地址，比如传进来的是张三，就显示张三的信息             name: 'user', // 这个name的作用是配合第95行添加属性用的，二者必须一致             component: {             template: `                                                             我叫：{{ $route.params.name }}                                                             我今年：{{ $route.query.age }} 岁了                                                                                                 "more" append> 更多信息                                                                                                                                               `                 },                 children: [{                 path: 'more',                 component: {                 template: `                                                                  用户：{{ $route.params.name }} 的详细信息 abcd1234                                  `                 }                 }]                 }                   ];                   const vRouter = new VueRouter({                     routes: routesArr // 这里要写routes ，而不是routers，不然 没数据                 })

　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

vRouter.beforeEach((to, from, next) => {     //这里写你的判断逻辑     const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];//需要登陆的页面名     let isLogin=  localEvent.get('web_login')||false;//获取是否登录状态     // 未登录状态；当路由到nextRoute指定页时，跳转至login     if (nextRoute.indexOf(to.name) > -1) {        if (!isLogin) {         //router.push({ name: 'login' });//可以直接跳转名         //next({ path: '/login', query: { redirect: to.fullPath } });//也可以跳转路径，并带上重定向       }     }     // 已登录状态；当路由到login时，跳转至home     if (to.name === 'login') {       if (isLogin) {         router.push({ name: 'home' });       }     }     next(); });

全局守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

1 const router = new VueRouter({ ... })2 3 router.beforeEach((to, from, next) => {4 // ...5 })

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

1.(路由守卫用来监控登录页面，如果未登录就不让跳转列表)

      导航守卫:提供的导航守卫主要用来通过跳转或取消的方式守卫导航

      1.全局守卫:管路由匹配哪一个地址，都会触发

      2.路由独享守卫 beforeEnter 

      3.组件独享守卫 beforeRouteEnter、beforeRouteUpdate、beforeLeave

2.三个参数:

      to:将要跳转的路由对象(参数)我是谁

      from:从哪个路由来的(存储的也是路由对象)我从哪里来

      next：向下执行，不执行，不继续，我要干什么

3.分为前置和后置守卫：

      前置守卫:beforeEach 路由跳转前的生命周期

      后置守卫:afterEach 路由跳转后的生命周期

4.组件内的守卫:

      进入组件之前的生命周期:beforeRouterEnter

      路由发生变化的生命周期:beforeRouterUpdate

      路由立开的生命周期:beforeRouterLeave

5.按需加载路由:

      vue的路由中router下的index.js:可以写按需加载路由

      例子:[{path:'/home',name:'home',component:()=>import('../hezi/home.vue')}]

      优点:不占用内存，提高性能，提高用户体验度。

全局守卫：

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

console.log('全局前置守卫 beforeEach')

next()

})

router.beforeResolve((to, form, next) => {

console.log('全局解析守卫 beforeResolve')

next()

})

router.afterEach((to, form) => {

console.log('全局后置守卫 afterEach')

})

路由独享守卫：

{

path: '/list',

name: 'list',

alias: '/aaa',

component: () => import('@views/List'),

children: [

{

path: ':id',

name: 'details',

component: () => import('@views/Details'),

props: true,

beforeEnter: (to, from, next) => {

console.log('路由独享守卫 beforeEnter')

next()

}

}

]

}

组件内守卫：

beforeRouteEnter(to, from, next) {

console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this

next((vm) => {

console.log('组件内路由前置守卫 vm', vm) // vm 就是this

})

},

beforeRouteUpdate(to, from, next) {

console.log('组件内路由更新守卫 beforeRouteUpdate')

next()

},

beforeRouteLeave(to, from, next) {

console.log('组件内路由离开守卫 beforeRouteLeave', this)

next()

}

全局守卫：前置守卫例子
前置守卫:是跳转之前路由的守卫
必须用一个变量接收它。

全局:前置守卫可以做判断登录，如果没有登录就不让跳转到这个页面

局守卫:后置守卫的例子
后置守卫：跳转之后路由的守卫