Vue3中导航守卫的使用教程

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});
router.beforeEach((to, from, next) => {
  // 执行一些操作，例如权限验证
  // 如果要继续路由导航，调用next()；如果要取消导航，调用next(false)
  next();
});
export default router;

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});
router.afterEach((to, from) => {
  // 执行一些操作，例如页面统计
});
export default router;

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/example',
      component: ExampleComponent,
      beforeEnter: (to, from, next) => {
        // 在进入该路由前执行一些操作
        next();
      }
    },
    // 其他路由配置...
  ]
});
export default router;

import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 在进入路由前执行一些操作
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由复用组件时执行一些操作
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开当前路由前执行一些操作
    next();
  },
  // 组件其他配置...
};

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});
router.beforeEach((to, from, next) => {
  // 检查登录状态
  if (to.meta.requiresAuth && !isLoggedIn.value) {
    next('/login'); // 重定向到登录页面
  } else {
    next(); // 继续路由导航
  }
});
export default router;

import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 在进入路由前执行登录操作
    // 假设登录成功后将登录状态设置为true
    isLoggedIn.value = true;
    next();
  },
  // 组件其他配置...
};

import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 检查登录状态
    if (!isLoggedIn.value) {
      next('/login'); // 重定向到登录页面
    } else {
      next(); // 继续路由导航
    }
  },
  // 组件其他配置...
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/login',
      component: LoginComponent,
      meta: { requiresAuth: false } // 不需要登录才能访问
    },
    {
      path: '/dashboard',
      component: DashboardComponent,
      meta: { requiresAuth: true } // 需要登录才能访问
    },
    // 其他路由配置...
  ]
});
router.beforeEach((to, from, next) => {
  // 检查登录状态
  if (to.meta.requiresAuth && !isLoggedIn.value) {
    next('/login'); // 重定向到登录页面
  } else {
    next(); // 继续路由导航
  }
});
const app = createApp(App);
app.use(router);
app.mount('#app');

// LoginComponent.vue
import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 在进入路由前执行登录操作
    // 假设登录成功后将登录状态设置为true
    isLoggedIn.value = true;
    next();
  },
  // 组件其他配置...
};

// DashboardComponent.vue
import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 检查登录状态
    if (!isLoggedIn.value) {
      next('/login'); // 重定向到登录页面
    } else {
      next(); // 继续路由导航
    }
  },
  // 组件其他配置...
};