一、配置路由参数

在router/index.js 文件中配置路由信息

redirect： 配置路由自动跳转
meta.requireAuth: 自定义参数 requireAuth ，标志是否需要判断登录状态（main.js中路由守卫将判断此参数）

import { createRouter, createWebHistory } from 'vue-router'
import LoginView from '../views/LoginView.vue'

const routes = [
  {
    path: "/",
    redirect: "/login"
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView,
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/TestView'),
    meta:{
      requireAuth:false,
    }
  },
  {
    path: '/index',
    name: 'index',
    component: () => import('../views/IndexView'),
    meta:{
      requireAuth:true,
    }
  },
  {
    path: '/news/list',
    name: 'newsList',
    component: () => import('../views/NewsList'),
    meta:{
      requireAuth:true,
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

二、main.js 设置路由守卫

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { isLogin } from "@/utils/MyFuncs";

// 引入element-plus及其样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 引入ElementPlusIconsVue
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App);
app.use(ElementPlus)
    .use(store).use(router).mount('#app')

// 从 @element-plus/icons-vue 中导入所有图标并进行全局注册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

// 路由守卫： 判断router/index.js中是否配置 requireAuth
router.beforeEach((to, from, next) => {
    // 判断页面是否需要检测登录状态
    if(to.meta.requireAuth){
        if(!isLogin()){
            next({
                path: "/login",
            })
        }else{
            next();
        }
    }else{
        next();
    }
    // 访问login页面时，若已登陆，则直接跳转首页
    if(to.name == "login"){
        if (isLogin()){
            router.push("/index");
        }
    }
})