vue路由的钩子函数以及用法详解_vue钩子函数写在哪-CSDN博客

本文链接：https://blog.csdn.net/crazyxiaoyuge/article/details/108153139

关于vue路由的钩子函数，无论实际项目中还是面试中都是很重要的话题，下面根据自己实际项目中的了解简单介绍下vue路由的几个钩子函数以及在项目中的用处

beforeEach
这个钩子函数一般用于全局级别的，对整个项目的路由跳转进行监控，可以根据路由配置文件中的meta中的配置来进行相应的逻辑判断，比如是否需要登陆/是否需要权限/是否要做缓存/是否显示头部尾部/是否进入时刷新等等。。

router.beforeEach((to, from, next) => {
  if (to.meta.isUseCache === undefined) {
    to.meta.isUseCache = false//判断是否要做缓存
  }
  if (to.meta.needLogin === undefined) {
    to.meta.needLogin = false
  }
  if (utils.isUplus()) {
    to.meta.showTabbar = false
  }
  if (to.meta.needLogin && !Store.state.isLogin && !utils.isUplus()) {
    <!--判断是否需要登录/是否要求app环境-->
  }

  // 获取分享者id 用于佣金结束
  if (判断) {
   <!--逻辑操作-->
  }
  　　//next() 正常跳转
　　　//next(false) //取消了导航
　　　next() //正常跳转，不写的话，不会跳转
 }

函数带有三个参数，来源路由的实体，要去的路由的实体，以及next回调，代码最后必须写next回调否则不跳转

路由文件中的配置，meta中的字段可以自定义：

const route= [{
  path: '/地址',
  name: '名称',
  component: () => import('路径'),
  meta: {
    keepAlive: false,
    title: '购物车',
    needLogin: true,
    showTabbar: true,
    showHeader: false,
  }
  }]

afterEach
afterEach的使用与 beforeEach一致，场景不同，可以进行一些当离开路由的操作逻辑
beforeEnte
这个函数是针对单个路由的配置，可以写在路由的配置文件中，针对单个路由做判断,用法如下：

const goods = [
  {
    path: '/url地址',
    name: '路由名称',
    component: () => import(
      '组件地址'),
    meta: {
      keepAlive: false,
      showHeader: false,
      showTabbar: false,
      title: '标题',
      hasdownload: true,
    },
    beforeEnter: (to, from, next) => {
      const id = to.query.id|| ''
      if (utils.isSgRn()) {
       <!--操作逻辑-->
        next(false)
      } else {
        next()
      }
    }
  }
  ]

beforeRouteEnter
这个函数可以写在组件内部，与data/mounted/method方法同级，需要注意的是此函数执行顺序优先于vue的生命周期函数beforeCreate，此时vue实力还未创建，this不存在，也是三个参数，与前面的一致

　　beforeRouteEnter(to, from, next){ 
　　　　console.log(this) //此时打印this，返回的是undefine，因为vue实例尚未初始化
　　　　next((vm) => { //如果需要在vue实例创建后做一些操作可以写在next回调中
　　　　　　<!--这里的逻辑会在实例化vue对象后调用-->
　　　　})
　　}