SpringBoot2+Vue2 tatsächliche Kampffehlerbehebung (11).

1. Geben Sie nach dem Start des Projekts localhost:8080 ein und springen Sie direkt zu 404

Route ändern

router/index.js

{
        path: '/404',
        name: '404',
        component: () => import('../views/404.vue')
    },



// 路由守卫
router.beforeEach((to, from, next) => {
    localStorage.setItem("currentPathName", to.name)  // 设置当前的路由名称，为了在Header组件中去使用
    store.commit("setPath")  // 触发store的数据更新


    //未找到路由的情况
    if (!to.matched.length) {
        const storeMenus = localStorage.getItem("menus")
        if (storeMenus) {
            next("/404")
        } else {
            //跳回登录页面
            next("/login")
        }
    }
    //其他的情况
    next()

})

2. Persönliche Daten Seite 404

router/index.js

const manageRoute = {
            path: '/',
            name: 'Manage',
            component: () => import('../views/Manage.vue'),
            redirect: "/home",
            children: [
                {
                    path: '/person',
                    name: '个人信息',
                    component: () => import('../views/Person.vue'),
                },
            ]
        }

3. Neue Seite 404

1. Erstellen Sie eine neue Seite

2. Fügen Sie der Seite ein Menü hinzu

3. Weisen Sie den Administratoren Menüs zu

3. Melden Sie sich erneut an

4. Klicken Sie in das gerade zugewiesene Menü

5.404

router/index.js

//提供一个重置路由的方法
export const resetRouter=()=>{
    router.matcher = new VueRouter({
        mode:'history',
        base:process.env.BASE_URL,
        routes
    })
}

store/index.js

logout(){
            localStorage.removeItem("user")
            localStorage.removeItem("menus")
            router.push("/login")

            //重置路由
            resetRouter()
        }

Optimieren Sie die Erstellung von Routen, um eine häufige Erstellung zu verhindern

//注意刷新页面会导致重置路由
export const setRoutes = () => {
    const storeMenus = localStorage.getItem("menus");
    if (storeMenus) {

        //获取当前的路由对象名称数组
        const currentRouteNames = router.getRoutes().map(v => v.name)
        if (!currentRouteNames.includes('Manage')) {
            //拼装动态路由
            const manageRoute = {
                path: '/',
                name: 'Manage',
                component: () => import('../views/Manage.vue'),
                redirect: "/home",
                children: [
                    {
                        path: '/person',
                        name: '个人信息',
                        component: () => import('../views/Person.vue'),
                    },
                ]
            }
            const menus = JSON.parse(storeMenus)
            menus.forEach(item => {
                //当且仅当path不为空的时候才去设置路由
                if (item.path) {
                    let itemMenu = {
                        path: item.path.replace("/", ""),
                        name: item.name,
                        component: () => import('../views/' + item.pagePath + '.vue')
                    }
                    manageRoute.children.push(itemMenu)
                } else if (item.children.length) {
                    item.children.forEach(item => {
                        if (item.path) {
                            let itemMenu = {
                                path: item.path.replace("/", ""),
                                name: item.name,
                                component: () => import('../views/' + item.pagePath + '.vue')
                            }
                            manageRoute.children.push(itemMenu)
                        }
                    })
                }
            })
            //动态添加到现在的路由对象中去
            router.addRoute(manageRoute)
        }
    }
}