Vue中三级菜单页面跳转路由改变页面不变

最新推荐文章于 2024-08-21 23:18:56 发布

hykDatabases

最新推荐文章于 2024-08-21 23:18:56 发布

阅读量2.3k

点赞数 6

分类专栏：前端学习文章标签： vue javascript es6 前端 npm

本文链接： https://blog.csdn.net/weixin_45102492/article/details/113577150

版权

前端学习专栏收录该内容

14 篇文章 1 订阅

订阅专栏

再写后台管理的时候遇到了三级菜单相互跳转时，地址变了，页面没有变。
解决：
在二级菜单上加上加上一个router-view

component: {render(c) {return c('router-view')}},

原因是共用了一个<router-view></router-view>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hykDatabases

关注关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue+element使用动态加载路由方式实现三级菜单页面显示的操作

10-14

主要介绍了vue+element使用动态加载路由方式实现三级菜单页面显示的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue3中路由跳转

qq_46617584的博客

09-02

1733

Vue3中路由跳转

1 条评论您还未登录，请先登录后发表或查看评论

Vue项目-三级联动的路由跳转与传参

m0_45306991的博客

08-21

914

比如说，鼠标点击事件，本来页面上有很多的鼠标点击事件，需要一个个的去写实现函数，但是如果你把鼠标点击事件交给上司来完成，那么就是鼠标点击那里的时候，就相当于上司找对应的下属来完成此事件，而不像前面一个个的去找实现函数。第二个问题：即使能确定点击的是a标签，如何区分点击的是一级、二级、三级的a标签？原因：router-link是一个组件，当服务器的数据返回后，循环出很多router-link组件创建实例1000+，创建组件实例的时候，一瞬间创建很多组件很耗内存，因此出现卡顿现象。，其余的子节点是没有的；

vue3根据路由的变化导航栏内容改变

qq_46617584的博客

09-14

1036

vue3根据路由的变化导航栏内容改变

vue-router 定义三级路由，路由跳转了，页面没出来

Passerby_K的博客

03-16

7927

可能是因为页面二级路由的和三级的路由共用router-view 了，利用router-view 和 redirect 重新定义一下（每个人的情况不一样，可以参考解决） component: {render(c) { return c('router-view') }}, redirect:'/goods/goodsManage', ...

vue3配置router路由并实现页面跳转

Gemini仔仔的专栏

04-23

9104

但是history也是有缺点的，不怕前进后退跳转，就怕刷新（如果后端没有准备的话），因为刷新是实实在在地去请求服务器了。ps：引入文件时记得新建view文件夹以及里面的A、B.vue两个页面。与之对应的，通过点击链接实现导航的方式，叫做声明式导航。通过调用 API 实现导航的方式，叫做编程式导航。2.1文件中引入vue方法、配置页面具体路径。vue-router 中的编程式导航 API。1. 普通网页中点击。// 第二种跳转方法。

vue中页面跳转拦截器的实现方法

08-29

在Vue应用的主入口文件`main.js`中，可以利用Vue Router提供的钩子函数`beforeEach()`来实现对路由跳转的拦截。具体步骤如下： 1. 定义路由时，为每个路由添加`meta`字段，其中包含`requireAuth`。此字段的值为...

vue实现路由不变的情况下，刷新页面操作示例

10-15

主要介绍了vue实现路由不变的情况下，刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下

react实现同页面三级跳转路由布局

10-16

在 React 中实现同页面的三级跳转路由布局是前端路由应用中一个常见的需求。三级跳转意味着用户可以通过点击页面上的链接在不同的内容之间切换，而无需重新加载整个页面。这种体验在Web应用中非常受用户欢迎，因为它...

左侧导航栏固定，点击进行路由跳转右侧部分显示不同内容

weixin_45096939的博客

01-19

2374

路由跳转的方法：this.$router.push(' 定义的路由名 ')；表示路由占位，在路由占位的时候可以把路由写活。在router中定义路由名称时可以用children定义子级路由；头部和左侧的导航栏不动，点击左侧导航栏中的按钮右侧的内容发生变化。

vue导航栏，页面跳转时导航栏不随之改变

qq_58194599的博客

03-06

1600

此处使用ChangeactiveIndex来更改state中的activeIndex 而这句话的意思是（ activeIndex: localStorage.getItem('activeIndex')||'1'） activeIndex的默认值为localStorage中的activeIndex，如果没有这个值的话就让默认值为首页所对应的索引，我这里首页用的索引是“1”，//在此处更改state中的activeIndex的值。//获取更改后的state中的activeIndex。

vue路由跳转，左边的菜单栏不变，右边页面改变

热门推荐

为梦想而奋斗，无悔_一叶扁舟的点滴成长！

01-23

2万+

1.需求:左边是菜单，右边的页面根据左边的菜单变化而变化，当一个界面想跳到另一个界面时，左边的菜单不变，但是右边的界面会响应的该改变。关键在于配置path：/management/advertDemandRelease/dataDetail。参数id放在路由上 (1)在vue文件中的代码: <el-table-column label="操作" align="left" style=...

Vue3-路由跳转专题详细总结

可可的博客

07-17

1万+

嵌套路由，顾名思义就是套娃，因而有着严格的父子关系，实际开发中三四层比较常见，至多就是七层。点击事件似乎可以使用模板更改视图中的内容，个人认为与路由的区别是路由能使网页中的地址栏发生变化。props为true时，从当前组件中引入传参变量就可以使用路由中携带的参数，使用方式如下。目的是将组件在页面的呈现效果保存，可以是整个路由组件分页面全部保存也可以是部分保存。直接在路径中传递，前提要保证路由文件中已经声明传递的变量值，否则会当作路径处理。1.确定父亲是home，其它几个页面都是home的孩子，写法如下。..

vue3中导航栏功能实现和路由跳转

weixin_68397463的博客

08-31

1524

最好在home组件中添加二级路由出口在vue3中使用import 引入本地图片。4.点击导航栏图片，实现图片更换，用index判断。点击保存，并在html中使用三目运算符判断。1.在导航栏组件中引入vue-router。1.在head组件中导航栏html代码。2.根据导航栏索引获取对应的路由路径。3.构造数组保存图片，循环渲染。3.点击导航栏保存index。导航栏手写点击更换不同图片。关于点击后实现组件的切换。

vue 动态显示三级路由

Start2019

09-09

1万+

无需vuex、本地存储写路由面包屑。已确定路由中包含3级菜单，如果有3级菜单，在点击二级菜单的时候，在面包屑中将该二级菜单下所有的3级菜单都显示出来；如果是一级菜单没有子菜单，或者只有二级菜单，那么面包屑中就显示一级菜单名称或二级菜单名称。

Vue3项目-配置路由及侧边栏导航栏

dayouan的博客

03-31

4178

2.在router文件夹下面index文件中 routes数组添加重定向其中某对象中添加 children 属性配置二级路由并关联上想要链接的页面 component 后面跟懒加载页面。-----------------------此时通过手动输出地址就可以跳转地址显示出路由出口的内容----------------------首先要提取头部组件到公共文件夹中方便后期维护然后引入到HomeView文件中因为我写的vue3是以js为主的因此要删除掉类型注解。

vue项目：使用ElementUI中的el-menu导航栏实现路由跳转，页面切换

weixin_52950296的博客

06-09

1万+

vue+elementUI 简单菜单跳转

JeecgBoot前端页面切换tab栏标签刷新数据

m0_55841258的博客

02-22

1583

jeecgboot页面打开多个标签，来回切换时，当前页面数据重新加载刷新

vue3中使用路由功能，页面路由内容不能正常显示，并且路由标签不能点击

weixin_51174757的博客