vue日记（待续...）

vue笔记8

10.路由守卫

路由的钩子函数称为路由守卫。分为全局守卫、路由独享守卫、组件内部生命周期守卫。

• 全局守卫：
  • 全局前置钩子：router.beforeEach(to,from,next),------前端鉴权
  • 全局解析钩子：router.beforeResolve(to,from,next)
  • 全局后置钩子：router.afterEach(to,from)
• 路由独享的守卫
  • beforeEnter(to,from,next)
• 组件内部的生命周期守卫
  • beforeRouteLeave：从该组件离开
  • beforeRouteEnter(to,from,next)：组件被激活
  • beforeRouteUpdate(to,from,next)：组件被重用时调用

全局前置钩子：

• router.beforeEach(fn),当路由发生更改时会调用这个钩子。一般用于前端鉴权：判断用户的登录状态，若未登录则跳转到登录页面。

• 参数：

  • to：即将进入的路由对象
  • from：当前要离开的路由对象
  • next():只有当这个函数被调用时，这个钩子才会被resolved。
    • next():执行管道中的下一个钩子，如果全部钩子执行完毕，则导航确认，页面跳转。
    • next(false)：中断当前的导航。如果浏览器的URL改变，页面会重置到from路由对应的页面。
    • next("/")或者next({path:’/’}):重定向到指定的路由。

  //配置全局前置守卫，在router.js文件中进行配置
  
  import Vue from 'vue';
  // 引入路由
  import VueRouter from 'vue-router';
  // 我们可以通过这种方式引入路由，在下面放到component属性上，也可以在下面通过异步组件导入
  // import my from '@/views/my.