vue3+vue-router4 路由守卫

router/index.ts:

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      component: () => import('../views/index/Home.vue'),
    },
    {
      path: '/me/:id',
      component: () => import('../views/me/Index.vue'),
      beforeEnter: (to, from) => {
        console.log('beforeEnter 路由独享的守卫')
        return true
      }
    },
  ],
})

router.beforeEach((to, from) => {
  console.log('beforeEach 全局前置守卫')
  if (from.path === '/home') {
    return true
  } else {
    return true
  }
})

router.beforeResolve(async (to) => {
  console.log('beforeResolve 全局解析守卫')
  return true
})

router.afterEach((to, from) => {
  console.log('afterEach 全局后置钩子')
})

export default router

me/Index.vue:

Home.vue:

参考链接

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

人工智能学习网站

https://chat.xutongbao.top