vue3动态路由的实现

您所在的位置：网站首页 › vue3动态路由刷新变空白 › vue3动态路由的实现

vue3动态路由的实现

2023-06-30 04:24| 来源: 网络整理| 查看: 265

一、登录获取路由信息

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" }); } 二、渲染动态路由

在router/index.js中定义基本的路由信息，动态生成的路由默认放在Home组件

1、未使用动态路由的写法，一般会把所有路由信息写到home的children数组中

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、当使用动态路由时，默认向Home.vue中添加children子路由

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 });

在router.beforeEach中获取登录时所存储的数据

当生成动态路由后一旦刷新页面，页面会变成空白，需要重新从localStorage取值渲染

router.addRoute第一个参数是动态路由所在“位置”，是指定“位置”的name属性

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; 三、vuex代码

store/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; } }, })

【本文地址】

vue3动态路由的实现

vue3动态路由的实现

今日新闻

推荐新闻