vue3+vite+vue-router4.x实现动态添加路由
实现内容:
1.根据后台返回的菜单,前端实现动态添加路由;
2.解决刷新页面时,路由消失/页面空白的问题;
第一步:请求后台,返回菜单数据【内容如下】
-
// 后台返回的菜单数据
-
this.menuList = [
-
{ id: 1, path: '/home', name: '首页', icon: true, children: [], component: '/home/home' },
-
{ id: 12, path: '/pinia', name: 'pinia的使用', icon: true, children: [], component: '/pinia/pinia' },
-
{ id: 2, path: '/menu', name: '递归菜单页面', icon: true, children: [], component: '/recursion-menu/recursion-menu' },
-
{ id: 3, path: '/test', name: '测试', icon: true, children: [], component: '/test/test' },
-
{
-
id: 10,
-
path: '/permisson',
-
name: '权限管理',
-
icon: true,
-
children: [
-
{ id: '10-1', path: '/user', name: '用户管理', children: [], component: '/promission/user-manage' },
-
{ id: '10-2', path: '/role', name: '角色管理', children: [], component: '/promission/roles-manage' }
-
]
-
}
-
]
第二步:根据菜单数据,动态添加到路由信息中
1.静态路由【routes.ts文件】
-
import { RouteRecordRaw } from 'vue-router'
-
-
const Login = () => import('@/views/login/login.vue')
-
const Home = () => import('@/views/home/home.vue')
-
const Layout = () => import('@/layout/layout.vue')
-
const Page404 = () => import('@/views/error/page404.vue')
-
-
// 基础路由,不需要设置权限
-
export const basicRoutes:RouteRecordRaw[] = [
-
{
-
path: '/login',
-
name: 'login',
-
component: Login
-
}, {
-
path: '/',
-
name: 'layout',
-
component: Layout,
-
meta: {
-
requiresAuth: true // 在这里设置,表示layout下边的子路由全部需要登录才能访问
-
},
-
redirect: '/home',
-
children: [
-
{
-
path: '/home',
-
name: 'home',
-
component: Home
-
}
-
]
-
}, {
-
path: '/:pathMatch(.*)',
-
name: 'page404',
-
component: Page404
-
}
-
]
2.基础路由信息【index.ts】
-
import { createRouter, createWebHashHistory } from 'vue-router'
-
import { basicRoutes } from '@/router/routes'
-
import { App } from 'vue'
-
import { setupRouterHooks } from '@/router/routerHooks'
-
-
export const router = createRouter({
-
history: createWebHashHistory(),
-
routes: basicRoutes
-
})
-
-
export function setupRouter (app: App<Element>): void {
-
// 路由钩子函数
-
setupRouterHooks()
-
app.use(router)
-
}
-
-
export default router
3.将数据动态添加到路由信息中【routerHooks.ts文件】
-
addRoutes(this.menuList) // 此处的menuList为上述中返回的数据
-
-
-
import { router } from '@/router/index'
-
import type { MenuItem } from '@/pinia/modules/menu'
-
import { RouteRecordRaw } from 'vue-router'
-
-
// vue3 vite中的动态引入组件的方法
-
const loadView = import.meta.glob('../views/**/*.vue')
-
-
// 动态添加路由
-
export function addRoutes (menu: MenuItem[]) {
-
menu.forEach(e => {
-
// 只将页面信息添加到路由中
-
if (!e.children || e.children.length === 0) {
-
router.addRoute('layout', { name: e.path.slice(1), path: e.path, meta: { title: e.name }, component: loadView[`../views${e.component}.vue`] })
-
} else {
-
addRoutes(e.children)
-
}
-
})
-
}
第三步:添加路由钩子,解决页面刷新,路由消失的问题【routerHelper.ts】
-
import { router } from '@/router/index'
-
import nprpgreee from 'nprogress'
-
import 'nprogress/nprogress.css'
-
import { useMenuStoreWithOut } from '@/pinia/modules/menu'
-
-
const menuStore = useMenuStoreWithOut()
-
-
export function setupRouterHooks () {
-
router.beforeEach((to, from, next) => {
-
nprpgreee.start() // 开始加载进度条
-
if (to.path === '/login') {
-
next()
-
} else {
-
// 页面刷新时,重新加载路由
-
if (menuStore.menuList.length === 0) {
-
menuStore.setMenuList()
-
next({ path: to.path })
-
// next({ ...to, replace: true }) //此方法不生效
-
} else {
-
next()
-
}
-
}
-
})
-
router.afterEach(() => {
-
nprpgreee.done()
-
})
-
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggbcig
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22