router-link导航后，子页面不显示导航样式问题

最新推荐文章于 2024-04-18 09:40:19 发布
最新推荐文章于 2024-04-18 09:40:19 发布
阅读量769 收藏
点赞数 1
分类专栏： frontend 文章标签： typescript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40420929/article/details/121673249
版权

一、问题

当使用，点击进入导航1下面的子页面，不会显示导航1的当前active样式（即图中绿色框里的蓝色下划线）
在这里插入图片描述

二、解决源码

修改router.ts文件中的路由配置信息
主要是在导航1加入redirect

const router = createRouter({
   
  history: routerHistory,
  routes: [
    {
   
      path
最低0.47元/天 解锁文章
_Carpediem
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
router-link里面文本不显示问题
jsmylo的博客
06-01 1711
一.项目里面在menu菜单栏使用ant-design的menu组件，在标签里面使用图标组件和router-link标签。在router-link里面写文本，不显示。二.看解决前和解决后 里面的插值根本不管用。
vue-router为激活的路由设置样式操作
11-20
补充知识：记录vue遇到问题，子页面没有router-link对应导航栏激活样式 如下所示： li><router to=”/basicSearch” class=”{‘link-active’:linkBoolean}”>基础检索</router> data () { return { imgUrl, ...
vue-router中的router-link的active-class
Charlie8915的博客
12-17 178
vue-router中的router-link的active-class 在vue-router中要使用选中样式的方法有两种： 1、直接在路由js文件中配置linkActiveClass 2、在router-link中写入active-class 问题：如果就这样，那么会出现一个问题，不管跳转到哪里，跳转到根目录的那个连接（to="/"） ...
设置router-link样式-使用a
最新发布
Queen_sy的博客
04-18 412
有router-link 设置样式就用a就可以。核心代码（ps a前面没有.）设置样式图一变成图二。
router-link不识别
weixin_42600128的博客
02-16 781
router-link是Vue.js中的一个组件，它用于实现页面跳转和路由功能。如果你的代码中出现了“router-link不识别”的错误，可能是以下原因之一： 你没有正确引入Vue.js的router模块。在使用router-link之前，需要在代码中引入Vue.js的router模块，否则Vue.js无法识别router-link组件。 你的代码中存在拼写错误。请检查代码中是否有拼写错误，...
Vue中router-view与router-link连用时，链接跳转后不在router-view中显示并且新页面没有router-link内容
qq_43605401的博客
03-03 927
Vue2中router-view与router-link连用时，链接跳转不在router-view中显示并且新页面没有router-link内容。
使用router-link跳转子页面之后，菜单激活样式不生效的解决
qq_49074952的博客
08-10 822
使用router-link跳转子页面之后，菜单激活样式不生效的解决
vue-router 路由嵌套显示不出来_vue: router-link 动态路由
weixin_39594439的博客
11-25 2035
动态路由: 根据路由的不同请求不同的数据。$router 获取vue-router实例$route 获取url的详细信息:id表示在user后任意参数都可以访问到对应组件，但是必须有" / "。如: localhost:8080/user/1// router.js文件 打印this.$route<id存在$route.parms.id中然后我们把它渲染在template中header文件:...
vue-router二级导航切换路由及高亮显示的实现方法
10-16
首先，我们要创建两个主要的导航页面，比如“发现”和“我的音乐”。在Vue中，我们可以创建两个单独的组件，如`Discover.vue`和`MyMusic.vue`，分别代表这两个页面。每个组件内应包含相应的HTML结构、JavaScript逻辑...
第七课 router-link配置与Router构建选项1
08-03
在前端开发中，Vue Router 是一个非常重要的库，它用于管理 Vue.js 应用中的页面导航和组件。在本节课程“第七课 router-link 配置与 Router 构建选项1”中，主要讲解了 `router-link` 的使用以及 Router 的构建选项...
Vue 解决父组件跳转子路由后当前导航active样式消失问题
10-15
总的来说，解决Vue中父组件跳转子路由后导航active样式消失的问题，主要是通过调整CSS规则，确保`router-link-active`类能够覆盖所有匹配的路由，以及在使用第三方组件如Element UI时，正确地结合Vue Router动态设置...
vue router仿天猫底部导航栏功能
08-29
Vue Router仿天猫底部导航栏功能 ...本文主要介绍了使用 Vue Router 实现仿天猫底部导航栏功能的方法，包括获取图标、创建路由导航组件、使用样式、实现路由导航、使用图标和实现底部导航栏等知识点。
router路由跳转但页面内容不显示
weixin_41618672的博客
02-02 394
新手入门vue3踩坑记录
react项目—路由和嵌套子路由（react-router4.0）
web修理工
08-13 1615
前言：在做项目的时候，花费了几天的时间才把路由问题解决，但是对react的几种路由的区分和使用，我现在也是整的还不清楚。 1、安装相关的包： （1）npm install --save-dev react-router （2）npm install --save-dev react-router-dom （3）npm install --save react-router-config 在package.json中查看版本 2、配置路由 （1）新建路由文件 route.js
vue项目加上路由组件页面不显示
weixin_61286286的博客
05-01 4126
注意：切记已经要export default router导出，不然在下面main.js中配置是import导入会找不到index.js这个文件。查看项目文件中package.json(或package-lock.json)中vue-router依赖是否成功添加。这个问题的主要还是路由没有配置好，导致App.vue文件无法显示，下面是。配置路由表index.js。
记录vue遇到问题，子页面没有router-link对应导航栏激活样式
u013466380的博客
04-02 625
li><router-linkto="/basicSearch":class="{'link-active':linkBoolean}">基础检索</router-link></li> data () { return { imgUrl, linkBoolean:false } }, create...
vue路由跳转后页面样式会失效，刷新后又会恢复
weixin_42216857的博客
10-10 5578
vue通过router-link跳转页面后样式会失效 今天写了一个组件后想要通过另一个组件链接过来，就在里面使用router路由，当跳转之前的组件后发现部分内容样式失效了，没多想就刷新页面，样式恢复正常，但多次操作后发现每次路由后都会发生这样的问题 后来发现是组件中的<style>中没加入scoped <styel scoped>...<style> 添加后就不会出现样式丢失的问题了！！ scoped可以实现组件的私有化，不对全局样式造成污染 当前端的style只属于
router-link-active router-link-exact-active有什么用
01-18
这样可以方便地为当前激活的链接添加样式，以突出显示当前页面所在的导航栏链接。 2. router-link-exact-active：与router-link-active类似，但只有在当前路由与链接的路由完全匹配时才会添加router-link-exact-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值