首页 > 其他分享 >vue项目vuerouter动态添加路由坑中之坑

vue项目vuerouter动态添加路由坑中之坑

时间:2023-03-11 19:22:15浏览次数:41  
标签:异步 vue 添加 vuerouter addRoute 动态 坑中 路由

出了什么问题

请求到的动态路由数据该如何应用? addRoute() ? 你想的太简单了 !!!

起因

最近在用通过网络请求到的路由记录来进行动态路由渲染
后端大佬说路由全部放前端不安全 所以返回的就是当前账号下的路由表
当我信心十足的开始写的时候就发现 事情没有这么简单!!!!

问题出在哪?

我在router/index.js 中请求了数据 要异步吧? 异步的你能直接放到routes中吗?我试了不行!
那放到beforeEach中 使用addRoute函数来一个一个的添加吗? 我也试了 在组件中会获取不到路由 !

解决了 怎么解决的

用一个 新matcher 替代 旧matcher(在beforeEach中)
在刷新前注册一个事件 将动态加载后的 routes 保存到sessionStorage中 获取时先检测是否存在 若存在就 使用本地的,不存在就 使用云端的还是会有异步同步代码的问题 所以是坑

标签:异步,vue,添加,vuerouter,addRoute,动态,坑中,路由
From: https://www.cnblogs.com/008ts/p/17206721.html

相关文章

  • vue3 + vite 分析报告 report == rollup-plugin-visualizer
    安装插件 npmirollup-plugin-visualizer-D 配置vite.config.js文件【加入插件】import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'......
  • Day05-Vue脚手架
    Vue脚手架学习目标:理解Node.js基本使用方法理解包资源管理器NPM的使用理解webpack的作用理解vue-cli脚手架(重点)Element-UI组件库1.vue的格式: newVue({......
  • vue3-vite-cesium
     cesium中文网http://cesium.xin/ 优秀的学习资源http://cesium.xin/wordpress/archives/130.html  vite-plugin-cesiumvite社区插件安装cesiumhttps://git......
  • Day03-vue&es6新语法(高级)
    vue的学习网站:https://www.runoob.com/vue2/vue-tutorial.html回顾#1.ajax:完成页面局部刷新,异步交互。#2.axios发送ajax异步请求: 1)引入库<scriptsrc=""></script>......
  • vue&element项目实战
    1.背景2.项目模板2.1.开源模板项目下载与启动课程中使用的模板是实际开发中用得比较多的后端管理项目模板  拉取与下载方式#vue-admin-template#克隆项目gi......
  • vue&element项目实战 之api模块化与公共字典
    4.api模块化配置步骤一:编写字典api即dic.jsimportrequestfrom'@/utils/request'//查询字典列表exportconstgetDicList=(param)=>request({url:'/sys-dic......
  • vue&element项目实战 之element使用&用户&字典模块实现
    5.用户模块<template><div><span>更新时间:<el-date-pickerv-model="time"type="daterange"range-separator="至"......
  • vue 自定义组件 实现v-model双向绑定
    父组件:<childCompv-model="aaa"/><script>...data(){return{aaa:123}}...</script>自定义组件:childComp.vue<script>...props:......
  • 从vue生命周期中两个“不会保证”说起
    起因在mounted中使用ref获取一个节点中的子节点,有时会获取不到。vue2文档-生命周期文档中说明:mounted注意mounted不会保证所有的子组件也都被挂载完成。如果你希望......
  • vue2使用ECharts自适应大小
    1.安装监听容器大小变化的插件npminstallelement-resize-detector--save2.ECharts已经有重新绘制图表的函数 resize();<template><divid="home">......