vue 三级路由显示出现额外的顶部和侧边栏问题,三级路由显示有问题

已于 2024-01-26 10:14:04 修改
阅读量297 收藏
点赞数 2
文章标签： vue.js javascript 前端
于 2024-01-26 10:13:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44741820/article/details/135859107
版权

接手的项目,新需求增加三级路由,一开始按照网上说的新增加一个layout的组件页放在二级路由的component去引用,发现并没有生效,翻看代码,发现一开始的router-view缓存写在了一个整体页面布局里,包含了顶部,侧边栏,标签等,按照正常添加首次进入会出现额外嵌套了一层顶部侧边布局的代码
额外嵌套的一层
这边解决的办法是二级路由component增加render,直接返回,不进行其他引用,重新打开页面后正常显示

component:{render(h){return h('router-view')}}
三七是只没毛的猫
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
iview-admin 三级菜单路由
weixin_45629194的博客
09-12 1462
在iview-admin项目中遇到三级菜单的问题，参考文章https://segmentfault.com/a/1190000013555613 解决办法是增加一个中间层作为二级路由的component选项，项目中目录如下： 路由配置如下： { path: '/otherBusiness', name: 'otherBusiness', meta: { ico...
vue3 面包屑三级or多级路由配置
鹤渺的星球
08-05 5023
面包屑组件可以清晰的显示当前页面的路径，快速返回之前的任意页面。那么三级或者多级路由应该怎样配置，这里以自己写的代码为例，先看看实现效果。
iview中动态实现menu三级菜单，多级菜单
fanyanjiang的博客
04-01 1755
template部分 <template> <div class="deskTop_page"> <Menu ref="side_menu" :active-name="activeName" theme="light" width="auto" :class="menuitemClasses" accordion :open-names...
Vue三层嵌套路由页面不显示问题，vue-element-admin三层路由显示空白
coderYYY的博客
11-18 2898
渲染不出来是因为第二层那里缺少一个容器，用一个组件专门用来渲染即可。
关于vue3级路由的问题
lornall的博客
05-24 651
router.js的写法：二级路由的component写layout,childern里是可变换的地方，也就是真正二级路由页面变化的地方。比如一个后台管理系统。二级路由里头的部分也需要变化。比如页面分成两部分，左侧是菜单，右侧是变化的部分。在appmain这个地方再进行布局，比如 <menu /> <router-view>但是修改路由会涉及到左侧导航菜单渲染和tag-view的部分，尽量不要改路由。直接在页面里进行功能实现就行。比如菜单变换时用v-if显示不同的组件。二级路由 一般放在layout里。
vue.js通过路由实现经典的三栏布局实例代码
10-18
这种布局通常包括一个头部、一个侧边栏和一个主要内容区域，它们可以分别独立展示不同的内容。 首先，我们需要创建三个组件，分别代表三栏布局的各个部分。在Vue.js中，组件是可复用的代码块，它们定义了HTML结构、...
vue实现侧边栏导航效果
01-19
本文实例为大家分享了vue侧边栏导航的具体代码，供大家参考，具体内容如下 最终效果 点击下一个导航，上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 ...
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
10-18
这个问题通常发生在当我们有多个同级路由，并且在切换子路由时，希望父路由的选中状态能够正确反映当前的路由路径。 首先，让我们看下初始的路由配置。在Vue CLI项目中，路由通常定义在`src/router/index.js`文件中...
解决Vue 刷新页面导航显示高亮位置不对问题
11-28
利用到vue的父子和子父传值；监听状态的变化 子页面将值传给父页面 父页面接收传过来的值 父组件把值传给header头部组件，头部组件通过prop接收 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定...
vue+Vue Router多级侧导航切换路由(页面)的实现代码
11-30
在项目里经常会遇到侧导航切换页面的功能。 如果我们将侧导航做成公共组件，来调用的话，就会在每一个页面都引用该组件，在后期维护的时候比较麻烦，比如改参数。 所以此文将侧导航做成父页面组件，将切换的页面做成...
vuejs中如何实现三级路由并刷新页面时保持当前路由激活状态
itclanCoder
09-15 2502
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言之前有介绍过vuejs中的路由的传参及路由的props配置,对于如何配置一级路由,二级路由,对于很多同学来说,基本上没什么难度然后在配置三级路由以上的时候,往往却没那么容易,会出现...
vue router 路由 1级 2级 3级以及3级路由跳转改变以及路由下的动
csstmg的博客
07-27 904
{ path: '/example', component: Layout, redirect: '/example/staffhmc', name: 'Example', meta: { title: '员工管理', icon: 'yuangbl', ids: [6, 15, 20, 132] }, // 1 children: [ { path: 'staffhmc', name: 'Staffhmc', component: () .
vue-router 3级路由
酷酷的旭
07-08 8670
import Layout from '@/layout' const ptrECard = { path: '/ptrECard', component: Layout, redirect: '/ptrECard', name: 'ptrECard', meta: { title: 'ptrECard', icon: 'logistics' }, c...
vue三级路由解读--及模块化路由导出
weixin_44524243的博客
04-09 745
简介 近期做项目需要用到vue三级路由的概念，踩了不少坑。看了不少网上的教程和博客还是有坑。记录一下。 （PS：各位既然能看到三级路由–普通路由的基本知识就不带大家回顾了 ）。 先上代码：（代码的路由片段为我项目的路由，看思路，这是一个路由js文件，{}内的代表的是路由数组中的一个值，我这是模块化把路由分离出去了，不是完整的index.js的路由哈，知道思路就行了）。所有的icon为阿里图标库 三级路由代码 import Narbar from '@/components/HeaderNar/index.v
antdesignpro prolayout 三级菜单问题
withwz的博客
05-15 5187
三级菜单问题 活动系统 -----选择活动 ------------创建活动 采用的方式是选择活动和创建活动在同级，隐藏创建活动但从选择活动跳转到创建活动会导致在侧边导航不显示了。 解决方法 selectedKeys在protable上使用 _selectedKeys _属性 第一步：重写一下左侧链接菜单 在跳转的前做一些事情（设置当前选择的菜单的key） 第二步：没了。。。 我本以为还需要设置 跳转到隐藏了的菜单路由页面里 需要设置跳转之前的路由的key是不用的，隐藏的路由不会给选上。。。这样.
iview-admin 三级菜单路由嵌套
weixin_33872660的博客
03-06 1437
使用iview-admin，框架是二级菜单，因业务需要改成三级菜单。其他部分都已经改好，但是页面仍然没有出来，页面也没有了报错，比较诡异。后来发现问题可能在路由配置，看到了别人写的这个demo，链接：https://jsfiddle.net/767nb8u1/1/可以看到，嵌套组件中的每一级都有component选项，好像是必须的（页面也...
Vue-Ci搭建项目
2301_78875117的博客
06-26 530
npm 是Node.js的包管理工具,用来安装各种 Node.js的扩展。vue-cli 官方提供的一个脚手架,用于快速生成一个vue的项目模板;JavaScript 的包管理工具,也是世界上最大的软件注册表。简单的说 Node.js是一个前端js运行环境或者说是一个JS语言解释器。好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个。骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;创建 index.js 文件,在其中配置路由。其他开发人员共享的代码。
深入理解 Vue.js 中的 deep: true
weixin_42279822的博客
06-26 800
deep: truedeep: true是 Vue.js 监听器中的一个重要配置选项，允许我们递归地监听对象内部所有属性的变化。在处理复杂数据结构和需要实时同步数据的场景中，deep: true非常有用。然而，在使用时需要注意性能问题，确保在必要的场景下才使用这个选项。通过合理使用deep: true，我们可以更好地管理和响应数据的变化，提升应用的健壮性和用户体验。
vue3插槽的使用
最新发布
qq_47040462的博客
06-28 421
作用域插槽可以接收来自子组件的数据，使插槽内容能基于这些数据动态变化。默认插槽是最基本的形式，用于插入任何未明确命名的内容。通过合理使用插槽，你可以设计出高度可复用和灵活的组件。具名插槽允许你有选择性地插入内容到组件的特定位置。
vue侧边栏路由跳转
07-28
在Vue中配置侧边栏路由跳转的步骤如下： 1. 首先，在router文件夹下创建一个index.js文件来管理路由。在该文件中，使用VueRouter插件，并导出一个新的VueRouter实例。在routes数组中定义各个路由的路径、名称和组件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值