vue-router进入页面时导航栏没有active效果

最新推荐文章于 2024-07-21 00:03:27 发布
原创 最新推荐文章于 2024-07-21 00:03:27 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在使用特定路由配置时遇到的导航栏Active效果缺失问题，并提供了解决方案。通过调整路由设置，实现了页面加载组件的同时，确保了导航栏的正确激活状态。

{path:'/',component:'/x'}这样进入页面时会有加载组件的效果，但是导航栏没有active效果。可以改为[{path:'/',redirect:'/x'},{path:'/x',component:'/x'}]

Vue——父组件跳转子路由后当前导航active样式消失问题
一只程序喵
07-07 2079
效果图如下： 实现方法如下： 一级路由（personal.vue）： <template> <div id="app"> <div> <h4 class="routerStyle"> <router-link to="/personal/personalwork"><span>作品管理</span></router-link> <router-link
结合Vue-router封装一个导航栏组件
Chil_G的博客
09-18 1301
需求：使用Vue封装出一个导航栏组件
解决vue-router-active无效问题
黑猫几绛的博客
05-24 2618
解决vue-router active-class无效问题 在自制tabBar中遇到了这些问题： （1）设置的样式中，path为'/'的icon始终被设置了active样式 解决办法: 由于router-link to的每个路由首部都存在'/'，因此都可以激活默认路由'/'，这也是为什么当path为'/'的时候始终有active样式，甚至出现了当点击其他tab按键时，出现了两个active样式。 在<router-linkto="/" >加上exact 属性 表示只有在地址为 /...
Vue Element ui导航栏选中高亮,刷新后选中消失
weixin_47906106的博客
10-17 2993
Vue Element ui导航栏选中高亮,刷新后选中消失
解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失
qq_65388624的博客
08-23 2368
解决Vue导航栏路由跳转，刷新后导航块高亮消失
Vue3 Element-plus导航栏,页面点击刷新后失去当前导航栏点击高亮,到默认地址
weixin_56716246的博客
11-09 1649
Vue3 Element-plus导航栏,页面点击刷新后失去当前导航栏点击高亮,到默认地址
vue-router为激活的路由设置样式操作
11-20
本文将详细讲解如何为Vue Router中的激活路由设置样式，以及解决子页面中`router-link`对应的导航栏激活样式问题。 首先，我们要为激活的路由设置样式，通常我们会在CSS中定义一个特定的类，比如`active`。这个类将...
解决vue-router 二级导航默认选中某一选项的问题
12-13
二级导航条，不是二级路由的（如果是二级路由是用linkActiveClass来做，我之前文章说过），是单纯获取数据的按钮，当这个页面出现时，默认选中第一项。 首先： 上面的判断的意思是：如果你点击某一个选项把这个...
vue-router 路由详解
大学生小郑的博客
07-21 1555
vue-router 路由详解
导航栏组件在刷新后选中的高亮丢失
weixin_45039278的博客
08-12 196
1 使用vuex、pinia等仓库，在路由发生变化的时候储存路径，并将其设置为默认高亮的选项。在组件开启路由模式后，由于页面刷新后路由状态丢失，高亮会回到设置的默认高亮。2 用session等保存到本地。
vue切换菜单时不需要页面刷新_vue element-ui 刷新页面后导航菜单不高亮问题
weixin_39783915的博客
12-19 1410
问题详情：在使用element-ui的NavMenu组件作为导航菜单的时候，我是通过遍历router/index.js里的路由json数组(已定义成常量)来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。尝试解决：初步Google搜索之后发现原来NavMenu组件有这么一个参数配置用来管理当前激活的菜单：default-active 说明：当前激活菜单的 i...
vue使用iview导航栏Menu activeName不生效
Seven_Next的博客
04-22 2124
记录一下使用iview-Menu遇到的一个问题 使用iview使用导航栏组件Menu 导航菜单 当我们需要默认选择内容为 我们知道 当我们需要在进入页面时或使用数据来驱动该视图时会遇到无法使用 失效的问题 <Menu ref="side_menu" :theme="theme3" :active-name="activeName"> <MenuGroup tit...
解决使用vue创建网站跳转登录界面时，底部导航栏无法去除的问题
keepbao的博客
11-26 633
解决使用vue创建网站跳转登录界面时，底部导航栏无法去除的问题 给登录组件的div绑定一个id或者class名称 再到style标签中设置 #名称 { height: 100vh; position: relative; z-index: 9; background-color: #fff; } 设置前： 设置后： 到此就解决底部导航栏的显示问题 以下为问题解决过程中遇到的难点： 一、使用v-show中的meta属性设置
解决element-ui侧边导航在页面刷新后失去高亮的问题
littlebearGreat——宁静致远
07-06 8839
element-ui  +  vue.js项目中，页面刷新后侧边导航失去高亮。在此，解决此问题1. element-ui  提供一个属性 :default-active='activeNav' 来设置导航的默认高亮。可以利用这个属性来处理页面刷新后的高亮问题2.在页面刷新的时候，获取地址栏中的地址，再写一个地址与做导航的配置文件，得出default-active  的值即可。下面是我写的配置文件/...
网站页面刷新后,导航菜单高亮显示的位置不对问题
wasd2399的博客
02-28 640
解决公共页面路由跳转刷新高亮丢失问题
vue-router中用'*'指定默认组件的时候不加载router-link-exact-active的问题
yuan5801551的博客
08-12 1732
vue-router中用’*'指定默认组件的时候不加载router-link-exact-active的问题 在vue-router中，我们想要定义默认主页，就可以使用’*'通配符： 优点:{ 1,可以解决404问题 2,可以定义默认页面 } 缺点：{ 1,给页面带来未知的隐患 } router-link-exact-active，关于这个我们知道，在vue-router中这个是可以直接使用而不用...
vue中NavMenu导航菜单刷新高亮，上一级常亮实现
coinisi_li的博客
01-09 1776
而一级菜单栏由activeMenu来自定义高亮，使得activeMenu配置和一级菜单的index属性中的配置一直一致，这样接口文档内的纵向菜单在切换的时候就不会影响到一级主菜单的高亮了。通过路由router设置路由元信息（meta）记录地址，在MenuNav中读取meta中设置的信息，匹配el-menu-item中index的值，来解决刷新或地址改变造成的一些导航栏高亮问题。在当前页面中还嵌入一个纵向菜单，这个纵向菜单高亮代表这个页面显示不同的tab（刷新页面后依旧保持高亮）在菜单中，存在多级带单。
Vue点到子路由，父级，无法高亮问题解决
*
12-25 1925
[问题] Vue点到子路由，父级，无法高亮 【原因】多是因为链接简写相对路径没有写完整导致 【解决】把子路由的router-link的to属性里链接写完整、并把router配置文件里path也写完整即可 1. hello.vue 【1】以下是路由链接 注意路径to要加上主组件，这样点到子路由里，主路由设置颜色才不会消失 <template> <div> <...
element-ui，router.push到其他路由，菜单栏不会高亮对应的路由
weixin_30344131的博客
01-20 1156
使用饿了吗的路由，使用this.$router.push({path: ''})跳到其他的路由，菜单不会高亮。 如图所示，点击图上三个位置，需要使用this.$router.push({path: ''})跳到其他的路由，但是跳过去之后，左侧的菜单并不会高亮，查资料后说的是要把路由写的和index一样，但是没有解决，后来才知道，使用vue的bus解决。 1.在assets文件夹下建js/bus...
element-ui+vue-router:实现导航栏跳转路由，完整的项目事例
最新发布
11-24
我们被要求提供一个使用Element UI和Vue Router实现导航栏跳转路由的完整项目示例。根据引用内容，我们可以总结出关键点： 1. 在el-menu组件上设置`:router="true"`，这样菜单项被点击时会使用vue-router进行跳转。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值