vue3-11

后端Java代码 

src\router\a6router.ts文件

import { createRouter, createWebHashHistory } from 'vue-router'
import { useStorage } from '@vueuse/core'
import { Menu, Route } from '../model/Model8080'
const clientRoutes = [
    {
        path: '/login',
        name: 'login',
        component: () => import('../views/A6Login.vue')
    },
    {
        path: '/404',
        name: '404',
        component: () => import('../views/A6NotFound.vue')
    }, {
        path: '/',
        name: 'main',
        component: () => import('../views/A6Main.vue')
    }, {
        path: '/:pathMatcher(.*)*',
        name: 'remaining',
        redirect: '/404'
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes: clientRoutes
})
//在每次路由跳转之前都会执行beforeEach里面的箭头函数,to代表要跳转的目标路由对象,from代表源路由对象
router.beforeEach((to,from)=>{
  if(to.name ==='main' && !serverToken.value){
        return '/login'
  }
})
//修改页面标题
router.afterEach((to,from)=>{
document.title = to.name?.toString() || ''
})
const serverRoutes = useStorage('serverRoutes', [])
export const serverMenus = useStorage('serverMenus',[])
//把从后端返回的token中的用户名存储起来
export const serverUsername = useStorage('serverUsername','')
//把从后端返回的token存储起来
export const serverToken = useStorage('serverToken','')
addServerRoutes(serverRoutes.value)
export function addServerRoutes(routeList: Route[]) {
    for (const r of routeList) {
        // r.parentName:是加入的路由的父路由，是addRoute()需要的参数
        router.addRoute(r.parentName, {
            path: r.path,
            name: r.name,
            component: () => import(r.component)
        })
    }
    serverRoutes.value = routeList
}

export function resetRoutes() {
    for (const r of clientRoutes) {
        router.addRoute(r)
    }
    serverRoutes.value= null
    serverMenus.value = null
    serverToken.value = null
    serverUsername.value = null
}
export default router

src\views\A6Login.vue文件

src\views\A6Main.vue文件