vue-admin-template动态添加路由侧边栏不渲染

最新推荐文章于 2024-05-13 10:10:41 发布
最新推荐文章于 2024-05-13 10:10:41 发布
阅读量844 收藏 5
点赞数 2
分类专栏： 笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43389274/article/details/125636378
版权

基于vue-admin-template框架进行二次开发，功能实现过程中发现动态添加的路由无法在侧边栏渲染，但是直接在地址栏输入地址是可以访问的，说明路由已经成功渲染了，但是侧边栏未渲染；
原因：addRoutes()添加路由之后，this.$router.options.routes()（初始路由列表） 未更新

有两种解决办法

//方法一：修改layout/components/Sidebar/index.vue

在这里插入图片描述

//方法二：修改permission文件

在这里插入图片描述

 夏天
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue-admin-template左侧导航栏
weixin_43887108的博客
05-01 3353
1、左侧导航logo显示隐藏 作者封装了左侧栏将sidebarlogo 放到了vuex里 然后通过一个全局配置的文件去设置logo是否显示 设置为true logo就出来了。
springBoot集成vue-admin-template实现动态路由使用sql
07-18
springBoot集成vue-admin-template实现动态路由所使用的数据库数据sql
vue-element-admin的左边菜单栏没有显示数据
LJAVAI的博客
10-15 659
使用vue-element-admin左侧菜单栏没有显示数据
真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路，切实可行！
qq_37150410的博客
11-24 1万+
Vue3动态路由刷新后失效真正可行的解决方案！
vue-admin-template 实现动态路由
最新发布
shgg2917的博客
05-13 510
主题：vue-admin-template 实现动态路由思路：后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)步骤：​ 1.后台返回一个json格式的路由表​ 2.因为后端传回来的都是的，但是前端这里需要的是一个组件对象啊，写个方法遍历一下，将字符串转换为组件对象;​ 3.利用vue-router的beforeEach、addRoutes、localStorage来配合上边两步实现效果;​ 4.左侧菜单栏根据拿到转换好的路由列表进行展示;
vue addrouters 动态添加子路由 页面没有按照子路由的形式展开在父路由页面上
hello917的博客
09-12 1866
登录的时候 后台返回页面的权限表 然后拿到该数组 便进行动态添加嵌套路由操作 具体代码如下 export function initRouters(){ myRouter.options.routes[2].children = [] //嵌套路由清空 避免重复添加 let projectIndex = JSON.parse(sessionStorage.getItem("projectIndex")) //选中项目索引 let menuRouters = JSON.parse(s
基于 vue-element-admin 基础模板实现侧边栏菜单动态渲染
指尖改变世界
05-20 5602
码云仓库：https://gitee.com/shayvmo/vue-element-template 【正文】 基于 vue-admin-template 基础模板实现动态生成侧边栏菜单 【思路】 获取用户信息的时候，把后端返回的路由保存在 store 里面，执行生成路由时，合并前端静态定义的路由以及后端获取回来的动态路由 【主要修改文件】 src/permission.js src/store/modules/permission.js utils/_import...
基于vue-admin-template的动态路由的问题解决
Goldfish_MIAO的博客
08-09 567
前端控制台报如下错误：首先经过一番网上搜索，有说是webpack的原因，调试后发现不是，然后再排查后台返回的组件地址。查看后台地址，错误原因即后台多加了个/，正确的组件地址为：刚开始遇到此类问题时，总以为是前端是不是写法错误，不支持之类的，然而我调试的时候，将动态路由写死进行调试可以正确返回，故思考后台返回组件地址的问题。
vue路由跳转，左边的菜单栏不变，右边页面改变
热门推荐
为梦想而奋斗，无悔_一叶扁舟的点滴成长！
01-23 2万+
1.需求:左边是菜单，右边的页面根据左边的菜单变化而变化，当一个界面想跳到另一个界面时，左边的菜单不变，但是右边的界面会响应的该改变。关键在于配置path：/management/advertDemandRelease/dataDetail。参数id放在路由上 (1)在vue文件中的代码: <el-table-column label="操作" align="left" style=...
详解使用vue-admin-template的优化历程
08-27
使用 Vue-Admin-Template 优化历程详解 在本篇文章中，我们将详细介绍使用 Vue-Admin-Template 的优化历程。 Vue-Admin-Template 是一个基于 Vue.js 的后台管理系统模板，旨在提供一个快速、灵活、可扩展的解决方案...
vue-admin-beautiful-template:vue-admin-beautiful-template基础版
03-21
不论您加或不加，您都可以享受到开源的代码，感谢您的支持和信任，群内部提供vue-admin-beautifu基础版本，开发工具自动配置教程和项目开发文档。 :seedling: vue3.x vue3.0-antdv分支（ant-design-vue） # 克隆...
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
学习vue-admin-template，优化了大量融入代码，添加中文注释，比官网好用
详解vue-template-admin三级路由无法缓存的解决方案
10-15
在Vue.js应用中，特别是在使用Vue-template-admin框架时，可能会遇到三级路由无法缓存的问题。这个问题的核心在于Vue的`<keep-alive>`组件，它用于缓存组件实例，以提高性能并减少不必要的重新渲染。然而，当涉及到...
Vue3项目-配置路由及侧边栏导航栏
dayouan的博客
03-31 3869
2.在router文件夹下面index文件中 routes数组添加重定向 其中某对象中添加 children 属性 配置 二级路由 并关联上想要链接的页面 component 后面跟懒加载页面。-----------------------此时 通过手动输出地址就可以跳转地址 显示出路由出口的内容----------------------首先要提取头部组件到公共文件夹中 方便后期维护 然后引入到HomeView文件中 因为我写的vue3是以js为主的 因此 要删除掉类型注解。
vue-admin-template里面的异步路由,常量路由,任意路由的添加,记录笔记
动感超人的博客
05-16 1584
路由模式 常量路由(比如首页) 异步路由(不同用户不同路由,根据权限来定的) 任意路由(比如404) vueAdmin当中使用路由权限 1.在路由注册的时候,分段注册 (默认只注册常量路由) src\router\index.js 2.处理路由信息,并添加到route当中 调用router当中的addRouter方法,传入的参数为数组(数组里面也就是路由信息) src\store\modules\user.js当中,根据token获取到用户信息后(比如用户权限,可以用的路由有哪些),来对数
九步完成 vue-admin-template 动态渲染路由
少年的范儿的博客
07-06 2185
这里使用的是 vue-admin-template 这个模板。可以从官网下载 vue-admin-template（基础模板）和 vue-template-admin（集成方案） 这两个模板，对照这修改。链接 1. 稍微整理一下页面 修改后台的路由文件 src/router/index.js export const constantRoutes = [ { path: '/login', component: () => import('@/views/login/index'
vue-admin-template 动态生成路由 (谁看谁会)import 填坑
qq_44614379的博客
04-19 1284
动态生成路由 import 不生效 这是后台返回的数据格式我们需要进行递归那么问题就来了 用import 列如 component: () => import('@/views/${path}'), 根本不生效 点击右侧菜单报错 然后我是这样写的 这是我调用的那个方法 function getViews(path) { return resolve => { re...
【vue2】使用vue-admin-template动态添加路由的思路/addRoutes的使用
嗨，朋友你好！我是前端领域的工作者
04-18 1637
使用vue-admin-template实现动态路由的一个添加的思路，addRoutes讲解
使用 React Router 的动态路由功能来渲染路由，我该怎么写，后端使用django4.1.2
06-06
在 React 中使用 React Router 来实现动态路由非常简单。下面是一个简单的示例代码： ```javascript import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/users/:id" component={User} /> <Route component={NotFound} /> </Switch> </Router> ); } function User(props) { const { match } = props; const { id } = match.params; // 根据 id 获取用户信息并渲染到页面上 return <div>User {id}</div>; } ``` 在这段代码中，我们使用了 `react-router-dom` 中提供的 `BrowserRouter`、`Route` 和 `Switch` 组件来实现路由功能。其中： - `BrowserRouter`：表示使用浏览器的 `history` API 来管理路由，可以通过 `Link` 组件来跳转路由； - `Route`：表示一个路由规则，当浏览器的路径与该规则匹配时，会渲染对应的组件； - `Switch`：表示只匹配第一个符合条件的路由规则，如果没有匹配的规则，则渲染 `Route` 组件的 `component` 属性为 `NotFound` 的组件。 在上面的示例代码中，我们定义了三个路由规则： - `/` 路径对应的是 `Home` 组件； - `/about` 路径对应的是 `About` 组件； - `/users/:id` 路径表示动态路由，`:id` 表示用户的 ID，对应的是 `User` 组件。 当用户访问 `/users/1` 路径时，`User` 组件会被渲染，并且通过 `match.params` 属性可以获取到动态路由中的参数，例如上面代码中的 `id` 参数。 至于后端使用 Django 的话，前端只负责路由的渲染和页面的显示，后端需要提供 API 接口来获取数据并返回给前端，前端再将数据渲染到页面上。可以使用 Django 的 REST framework 来实现 API 接口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值