Implementación del enrutamiento dinámico vue3

1. Inicie sesión para obtener información de ruta

Evento del botón de inicio de sesión en Login.vue

const res = await http.post('/login', data)
if (res.data.code === 200) {
    //存菜单
    let menuList = res.data.data.routers 
    localStorage.setItem('menuList', JSON.stringify(menuList))
    store.commit("setMenuList", menuList);

    //存路由
    let routes = res.data.data.components
    localStorage.setItem('routes', JSON.stringify(routes))
    store.commit("setRouters", routes);

    router.push({
        path: "/dashboard"
    });
}

 2. Representar enrutamiento dinámico

Defina la información de enrutamiento básica en router /index.js y las rutas generadas dinámicamente se colocan en el componente Inicio de forma predeterminada.

1. Si no se utiliza el enrutamiento dinámico, toda la información de enrutamiento generalmente se escribirá en la matriz secundaria del hogar.

import {createRouter, createWebHashHistory} from "vue-router";
import store from '../store/index'

const routes = [
    {
        path: "/login",
        name: "login",
        component: () => import ( /* webpackChunkName: "login" */ "../views/login/Login.vue"),
        meta: {
            title: '登录',
        },
    },
    {
        path: '/register',
        name: 'register',
        component: () => import(/* webpackChunkName: "register" */ '../views/login/Register.vue'),
        meta: {
            title: '注册',
        },
    },
    {
        path: "/home",
        name: "home",
        component: () => import ( "../components/Home.vue"),
        children: [
            {
                path: '/index',
                component: () => import('../views/Index.vue'),
                meta: {
                    title: 'Index',
                    requiresAuth: true
                }
            },
            {
                path: '/test',
                component: () => import('../views/Test.vue'),
                meta: {
                    title: 'Test',
                    requiresAuth: true
                }
            },
        ]
    }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

2. Cuando se utiliza el enrutamiento dinámico, la subruta secundaria se agrega a Home.vue de forma predeterminada.

import {createRouter, createWebHashHistory} from "vue-router";
import store from '../store/index'
import dealWithRoute from "./dealWithRoute";

const routes = [
    {
        path: "/login",
        name: "login",
        component: () => import ( /* webpackChunkName: "login" */ "../views/login/Login.vue"),
        meta: {
            title: '登录',
        },
    },
    {
        path: '/register',
        name: 'register',
        component: () => import(/* webpackChunkName: "register" */ '../views/login/Register.vue'),
        meta: {
            title: '注册',
        },
    },
    {
        path: "/home",
        name: "home",
        component: () => import ( "../components/Home.vue"),
    }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

Obtenga los datos almacenados al iniciar sesión en router.beforeEach

Una vez que la página se actualiza después de generar una ruta dinámica, la página quedará en blanco y será necesario volver a representarla desde localStorage.

El primer parámetro de router.addRoute es la "ubicación" de la ruta dinámica, que es el atributo de nombre que especifica la "ubicación".

router.beforeEach((to, from, next) =>   {
    // console.log('to, from', to, from);
    let isLoadRouters = store.state.asyncRoutesMark
    let token = sessionStorage.getItem('token')
    let routes = JSON.parse(localStorage.getItem('routes'))
    // 有token routes
    if (to.path == '/login') {
        next()
    } else {
        //用户已登录
        if (token && JSON.stringify(routes) != '[]') {
            if (isLoadRouters) {
                // console.log('路由已添加，直接跳转到目标页面');
                next()
            } else {
                //解决刷新页面空白
                //console.log('重新加载路由，并跳转到目标页');
                let route = JSON.parse(localStorage.getItem('routes'))
                store.commit('setRouters', route);
                store.commit('setAsyncRoutesMark', true);

                //添加动态路由
                let menuList = JSON.parse(localStorage.getItem('menuList'))
                dealWithRoute(menuList)

                next({...to,replace: true})
            }
        } else {
            // console.log('无登录信息，跳转到登录页');
            store.commit('setMenuList', []);
            store.commit('setAsyncRoutesMark', false);
            sessionStorage.setItem('token', '');
            localStorage.setItem('menuList', JSON.stringify([]));
            localStorage.setItem('routes', JSON.stringify([]));
            next(`/login`)
        }
    }

});

export default router;

 

//处理树形数据
//dealWithRoute.js

import router from './index';
import {RouterView} from "vue-router";

const dealWithRoute = (data, parent = 'home') => {
    for (let item of data) {
        //多级菜单
        if (item.children && item.children.length > 0) {
            router.addRoute(parent, {
                path: item.path,
                name: item.path.split('/')[1],
                component: RouterView,
                meta: {
                    title: item.name,
                    requiresAuth: true
                }
            })
            dealWithRoute(item.children, item.path.split('/')[1])

        } else {  //一级菜单
            router.addRoute(parent, {
                path: item.path,
                name: item.name,
                component: () => import(`../views/${item.component}`),
                meta: {
                    title: item.name,
                    requiresAuth: true
                }
            });
        }
    }
};

export default dealWithRoute;

 3. código vuex

tienda/index.js

import {createStore} from 'vuex'

export default createStore({
    state: {
        asyncRoutesMark: false,
        menu: [],
        routers: []
    },
    mutations: {
        setAsyncRoutesMark(state, data) {
            state.asyncRoutesMark = data;
        },

        setMenuList(state, data) {
            state.menu = data
        },

        setRouters(state, data) {
            state.routers = data;
        }
    }, 
})