首页 > 其他分享 >vue-router使用addRoute动态添加主界面的子路由

vue-router使用addRoute动态添加主界面的子路由

时间:2022-08-23 11:11:06浏览次数:80  
标签:vue const views path addRoute router any 路由

1、需求描述

从别处导出的可用前端文件,存放在系统@/views/下,不配置静态路由,当访问改菜单时,根据当前菜单的path动态向主界面(路由path: '/', name:'homePage')中添加子路由,使其页面可正常访问

注:当前菜单的path,为当前菜单文件存放的路径,如:菜单path为dynamicTest/dynamicTestList的存放位置为@/views/dynamicTest/dynamicTestList.vue

2、解决思路

 使用路由beforeEach全局守卫,若当前菜单不在静态路由中,则动态向主界面添加当前菜单的子路由

3、解决过程

  1)遍历所有页面文件

  注:vue2+vite2+ts项目使用import.meta.globEager方法遍历文件,vue2+webpack+ts项目使用require.context方法遍历文件

  2)添加router.beforeEach全局路由守卫

  3)判断to.path是否已配置过静态路由,是则执行next(),否则判断to.path对用文件是否存在@/views/文件夹下,是则执行4),否则执行next()

       4)定义临时路由变量({name: to.path,path: to.path,component: () => import(文件路径)},并使用router.addRoute方法添加主界面/的子路由

       5)vue2+vite2+ts项目具体代码如下:

       

import { Route, NavigationGuardNext, Location } from 'vue-router';

import router from './router/router';
// 遍历views文件夹下所有的文件
const requireComponent1: any = import.meta.globEager('./views/*.vue');
const requireComponent2: any = import.meta.globEager('./views/**/*.vue');
const requireComponent = {...requireComponent1, ...requireComponent2};
let toPathObj: any = {};
// 全局路由守卫 router.beforeEach(async (to: Route, from: Route, next: NavigationGuardNext) => {
const allRoutes: any = router.getRoutes();
// 判断是否已添加静态路由 const incCurRoute: any = allRoutes.findIndex((it: any) => it.path === to.path) > -1; if(incCurRoute) { next(); return; } // 判断是否已添加动态路由 if(!toPathObj.hasOwnProperty(to.path)) {
// 判断@/views文件夹下是否存在该路由文件 const isIncKey: any = Object.keys(requireComponent).find((key: any) => key.indexOf(to.path) > -1); if(isIncKey) { toPathObj[to.path] = isIncKey; const curRoute: any = { name: to.path, path: to.path, meta: {}, component: () => import(isIncKey), };
// 向name为'homePage'的路由中添加子路由 router.addRoute('homePage', curRoute); next({ ...(to as Location), replace: true }); return; } } next(); }); router.afterEach(() => {});

 

标签:vue,const,views,path,addRoute,router,any,路由
From: https://www.cnblogs.com/zy2gq/p/16615492.html

相关文章

  • better-scroll在终端触屏上滑动失效(vue)
    this.$nextTick(()=>{this.scroll=newBScroll(this.$refs.scroll,{scrollX:true,click:true,disableMouse:false,//启用鼠标拖动disableTouch:false//启用......
  • Vue3中插槽(slot)用法汇总
    Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。什么是插槽简单来说就是......
  • Vue2按需引入elementUI组件
    按需引入官方文档介绍借助babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。首先安装babel-plugin-component:npminstallbabel-plugin-c......
  • Vue复习1.0
    Vue复习1.0内容:Vue基础语法、计算属性、概念、指令Vue复习2.0已发布,文章涉及完整代码已全部上传至GitHub:Vue复习2.0——组件化开发详解@目录Vue复习1.0Vue的MVVMVue模板1......
  • uniapp 使用Vue3 setup组合式API 引入 uniapp 的 页面生命周期
    uniapp使用Vue3setup组合式API引入uniapp的页面生命周期<template><viewclass="content"><imageclass="logo"@click="handleFei"src="/static/logo.pn......
  • beego commentsRouter.go不能自动生成
    beego2.0开始使用注解路由,然而请求一直404发现是少了routers/commentsRouter.go官方文档https://beego.vip/docs/mvc/controller/router.md但并未说明还可以通过......
  • vue3 学习-初识体验-常见指令v-for和v-model
    继续通过小案例来体验一些常用的指令,以经典的todolist进行展示.首先呢通过v-for指令进行dom循环.v-for通常是在循环dom的编写的同时遍历数据进行填充.<!DOCTYPEht......
  • vue3 学习-初识体验-常见指令v-on和v-if
    继续来体验一波数据驱动结合绑定方法的实践案例.这里以最常见的反转字符串为栗子来体验面向数据编程.v-on用来绑定事件的,然后将方法名写在methods中即可.<!DOCTYPE......
  • Vue路由传递参数与接受参数
    路由(参数传递)使用路径匹配的方式修改路由配置{path:'/xxx/xxx/:id',component:XXX}主要是在path属性中增加了:id这样的占位符,来接受路由参数......
  • 记录vue
    #查看版本node-v#安装Node.js淘宝镜像加速器(cnpm)注意源地址已经改变npminstall-gcnpm--registry=https://registry.npmmirror.comcnpminstallcnpm-g#全局......