vue router 定义了三级路由，路由跳转了，但页面还显示二级路由的

最新推荐文章于 2024-08-12 10:29:13 发布
最新推荐文章于 2024-08-12 10:29:13 发布
阅读量6.2k 收藏 26
点赞数 6
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47264982/article/details/120063445
版权

因为页面二级路由的和三级的路由共用router-view 了，需要利用router-view 和 redirect 重新定义
如下图所示
在这里插入图片描述

听闻余生ssn
关注
专栏目录
Vue 中的Vue Router一级路由，二级路由，三级路由以及跳转
weixin_33804582的博客
06-18 7302
今天编写了一下Vue中的路由 先用命令行新建一个空的项目，并且我知道要用路由，就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vscode打开、引入demo5的文件夹，在vscode自带的命令行中安装依赖和启动 cnpm install cnpm run dev 之后成功启动在8080端口 要想显示导航，限...
vue 动态显示三级路由
热门推荐
Start2019
09-09 1万+
无需vuex、本地存储写路由面包屑。 已确定路由中包含3级菜单，如果有3级菜单，在点击二级菜单的时候，在面包屑中将该二级菜单下所有的3级菜单都显示出来；如果是一级菜单没有子菜单，或者只有二级菜单，那么面包屑中就显示一级菜单名称或二级菜单名称。
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
主要介绍了vue+element使用动态加载路由方式实现三级菜单页面显示的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue路由跳转但页面不变
最新发布
gvfduy的博客
08-12 215
出现这个问题真的让人很无语，都是粗心大意惹的祸。在App.vue页面中写上就行了，我犯的错误就是把当作了。标签，需要使用"to"属性配置跳转路径，千万不要与标签混淆。
vue三级路由内容在二级路由中展示(平级展示)，并保存选中状态。(Vue-router 如何在嵌套路由的同时做多级菜单。)
CCKing7的博客
03-02 3862
1.Vue-router 如何在嵌套路由的同时做多级菜单。 2.vue三级路由内容在二级路由中展示，并保存选中状态。 3.vue路由同级展示。
vue-router 三级路由，路由跳转页面异常白屏或404，或刷新三级路由页面后一级和二级路由菜单丢失
tangdou369098655的博客
02-22 1808
某些时候是因为二级和三级的路由共用router-view，可以使用router-view 和 redirect 解决问题。欢迎大家指出文章需要改正之处~
vue-03-路由-二三级路由跳转
qq_40792800的博客
03-31 7305
1、新建项目之后，在 components 文件夹下，新建 about 文件夹 2、引入二级路由，同样的是在main.js 文件下引入，这四个组件都是在 components/about 这个文件夹下，所以路径要写对 //二级路由引入 import Contact from './components/about/Contact' import Delivery from './compon...
vue3 三级路由跳转成功但页面未刷新
weixin_43957246的博客
07-10 529
在网上一番搜索后，发现是二级路由和三级路由共用了router-view导致的。（排查时可以试着在二级路由的组件里加上看看三级路由的组件会不会正常显示，如果可以的话大概率也是这个问题）在实现二级路由跳转到三级路由（菜单列表 -> 新增菜单页）时，会出现地址栏正确变动，但实际页面停留在菜单列表页并未改变的情况。需要注意的是 render h 在vue2和vue3里的用法不一样。
vue-router二级导航切换路由及高亮显示的实现方法
12-09
在这个示例中，我们将看到如何在 Vue 应用中实现二级导航的路由切换以及高亮显示。 首先，我们要创建导航页面的样式。在 `Discover.vue` 和 `Mymusic.vue` 文件中，我们定义了两个简单的组件，分别代表一级导航的...
vue router2.0二级路由的简单使用
08-30
Vue Router 2.0 二级路由的简单使用 Vue Router 是一个基于 Vue.js 的路由插件，能够帮助开发者快速搭建单页应用程序。今天，我们将详细介绍 Vue Router 2.0 的二级路由的简单使用。 什么是二级路由？ 在 Vue ...
react实现同页面三级跳转路由布局
10-16
要实现同页面的三级跳转路由布局，我们通常需要借助 React Router 这个官方提供的用于处理 React 应用中路由的库。React Router 可以帮助我们在单页应用中实现复杂的路由逻辑，包括嵌套路由和导航。 在本文所描述的...
vue-路由精讲 二级路由和三级路由的作用
12-28
1、我们继续上一个案例 vue — 路由精讲制作导航 — 从无到有 ，在 about文件夹下 创建一些文件夹。如下： 2、编写about.vue代码。当我们点击导航中 “关于我们” ，就会显示该部分内容。代码中写了四个可供点击后...
vue-router 三级菜单页面跳转时路由改变页面不变的解决
Eden_Yin的博客
09-18 2712
vue-router 三级菜单页面跳转时路由改变页面不变的解决 原因：共用了同一个<router-view></router-view> 解决方法：在二级路由处加一个router-viewcomponent: {render(c) { return c('router-view') }}
关于vue3级路由的问题
lornall的博客
05-24 757
router.js的写法：二级路由的component写layout,childern里是可变换的地方，也就是真正二级路由页面变化的地方。比如一个后台管理系统。二级路由里头的部分也需要变化。比如页面分成两部分，左侧是菜单，右侧是变化的部分。在appmain这个地方再进行布局，比如 <menu /> <router-view>但是修改路由会涉及到左侧导航菜单渲染和tag-view的部分，尽量不要改路由。直接在页面里进行功能实现就行。比如菜单变换时用v-if显示不同的组件。二级路由 一般放在layout里。
Vue嵌套路由(三层)
qq_40126542的博客
01-04 1万+
小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。 Vue嵌套路由： 实现效果(路由三层嵌套，点击一级tab显示二级tab效果，二级tab点击切换对应内容,不在tab区域里的内容，切换时不重复渲染)： Demo访问时路径：http://IP:端口/#/routers...
VUE3.0 路由跳转之后页面停留在上一个浏览页面位置不会回到顶部问题
七月
05-29 1731
方式一：普通用法，vue2.0也可用。方式二： setup 语法糖时。
关于vue,在当前二级路由点击第三级路由的时候,替换当前的二级路由
weixin_42947972的博客
04-18 2639
关于vue,在当前二级路由点击第三级路由的时候,替换当前的二级路由 首先需要让二级路由和三级路由平级,也就是把二级路由也在三级路由里面, 让二级路由去重定向到三级路由 component写成一个方法来变成路由 效果: ...
Vue三级菜单进行跳转页面不改变的原因
qq_36697196的博客
12-03 2523
vue-router 三级菜单页面跳转时路由改变页面不变的解决 原因：共用了同一个 解决方法：在二级路由处加一个router-view component: {render© { return c(‘router-view’) }} 转载:https://blog.csdn.net/eden_yin/article/details/108662109 ...
vue3动态路由 定义了三级路由，路由跳转了，但页面还显示二级路由的
05-25
可能是因为你在定义动态路由时没有正确配置子路由。 如果你的三级路由是嵌套在二级路由中的，那么你需要在二级路由的组件中定义子路由，如下所示： ```javascript const routes = [ { path: '/second', component: SecondComponent, children: [ { path: 'third/:id', component: ThirdComponent } ] } ] ``` 这样，当你访问 `/second/third/123` 时，会先加载 `SecondComponent`，然后在 `SecondComponent` 的模板中使用 `<router-view>` 显示 `ThirdComponent`。 如果你已经正确定义了子路由，但页面仍然显示二级路由的内容，那可能是因为你没有在 `SecondComponent` 的模板中使用 `<router-view>` 显示子路由的内容。请确保你在 `SecondComponent` 的模板中使用了 `<router-view>`，如下所示： ```html <template> <div> <h1>Second Component</h1> <router-view></router-view> </div> </template> ``` 这样，当你访问 `/second/third/123` 时，会先加载 `SecondComponent`，然后在 `SecondComponent` 的模板中显示 `<router-view>`，从而加载 `ThirdComponent` 并显示在页面上。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值