设置某些路由为公开访问，不需要登录状态即可访问

在单页面应用（SPA）框架中，如Vue.js，路由守卫是一种非常有用的功能，它允许你控制访问路由的权限。Vue.js 使用 Vue Router 作为其官方路由管理器。路由守卫主要分为全局守卫和组件内守卫。

以下是如何设置路由守卫以允许某些路由公开访问的示例：

全局前置守卫：在Vue Router的配置中，你可以使用 beforeEach 方法设置一个全局前置守卫，来检查用户是否登录，并根据登录状态重定向用户。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import Dashboard from '../components/Dashboard.vue';Vue.use(Router);const router = new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/dashboard',name: 'Dashboard',component: Dashboard,meta: {requiresAuth: true // 标记需要认证的路由}}// 其他路由...]
});// 全局前置守卫
router.beforeEach((to, from, next) => {// 检查路由是否需要认证if (to.matched.some(record => record.meta.requiresAuth)) {// 检查用户是否已登录const isLoggedIn = // 你的登录状态检查逻辑if (!isLoggedIn) {// 如果未登录，则重定向到登录页面next({path: '/login',query: { redirect: to.fullPath } // 将原始目标路由作为参数传递});} else {next(); // 已登录，继续访问目标路由}} else {next(); // 不需要认证，继续访问目标路由}
});export default router;

组件内守卫：你可以在路由组件内部使用 beforeRouteEnter 或 beforeRouteEnter 守卫来实现类似的逻辑。

// components/Dashboard.vue
export default {data() {return {// 组件数据};},beforeRouteEnter(to, from, next) {// 检查用户登录状态const isLoggedIn = // 你的登录状态检查逻辑if (!isLoggedIn) {// 如果未登录，重定向到登录页面next('/login');} else {next();}},// 其他组件选项...
};