vue-router中用'*'指定默认组件的时候不加载router-link-exact-active的问题

最新推荐文章于 2024-07-21 00:03:27 发布
最新推荐文章于 2024-07-21 00:03:27 发布
阅读量1.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue中有趣的东西 文章标签： vue-router * link-exact-active
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yuan5801551/article/details/99305742
在Vue-router中使用'*'指定默认组件时，遇到router-link-exact-active未正常工作的问题。文章探讨了这一现象的原因及解决方案，即通过重定向来确保默认页面正确应用样式。

vue-router中用’*'指定默认组件的时候不加载router-link-exact-active的问题

在vue-router中，我们想要定义默认主页，就可以使用’*'通配符：
优点:{
1,可以解决404问题
2,可以定义默认页面
}
缺点：{
1,给页面带来未知的隐患
}

router-link-exact-active，关于这个我们知道，在vue-router中这个是可以直接使用而不用加在HTML中的一个CLASS，一般用于伪类实现变色

问题出现了，我们发现使用通配符的主页，并没有被加上router-link-exact-active

解决办法

使用重定向

VUE官网
官方文档说的很清楚，就像用户访问/a一样，我们使用该方法，发现问题被解决了！

我的代码效果

在这里插入图片描述

router-link细节
小菜鸟的博客
04-21 555
router-link细节 首先router-link在转换得时候会转换成一个a标签 <ul class="tabbar-ul"> <router-link to='/' tag="li">网站首页</router-link> <router-link to='/Popular' tag="li" >热门动态</router-link> <router-link to='/Performan'
技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效
yangyangdt的博客
01-05 2982
vue3中按vue2做，router-link并不能变样式，并且还是官方的绿色样式，显然在vue3中这个属性已经不适用了。因为在vue2中...
vue 中的vue-router路由选中添加router-link-exact-active类名
sunshineTing2的博客
05-22 782
.router-link-active { border-bottom: 4px solid blue; } .router-link-exact-active { border-bottom: 4px solid red;
vue-router进入页面时导航栏没有active效果
qq_25302061的博客
10-25 1781
{path:'/',component:'/x'}这样进入页面时会有加载组件的效果，但是导航栏没有active效果。可以改为[{path:'/',redirect:'/x'},{path:'/x',component:'/x'}]
vue 解决mounted不重加载子组件问题
weixin_41973410的博客
11-05 3854
有时需要在父组件中重复加载同一个子组件，但会出现子组件不重新加载的问题。 解决方法：在子组件外加一个div框住它： 这样，父组件的数据就可以在每次加载子组件的时候传入到子组件中 ...
Vue路由管理器Vue-router的使用方法详解
10-15
`<router-link>`组件通过`to`属性来指定目标地址，通常默认生成一个`<a>`标签，但你可以通过`tag`属性改变生成的标签类型。例如，`<router-link to="/foo" tag="li">foo</router-link>`会生成一个`<li>`标签，并且...
使用vue-router为每个路由配置各自的title
12-10
传统方法 ...如果想要动态的去修改，需要使用如下的方法。 document.title = '这是一个标题'; 这样会让我们做很多无用功。显得十分蠢。 使用Vue-Router的方法 ... linkExactActiveClass: 'exact-active-link'
vue-router 路由详解
大学生小郑的博客
07-21 1483
vue-router 路由详解
【vue-router源码】十二、useRoute、useRouter、useLink源码分析
MAXLZ的博客
06-13 2256
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该篇文章将分析useRoute、useRouter、useLink的实现。
Vue.js——vue-router路由，关于exact-active-class 和 active-class 的区别
程序员野蛮成长
03-25 1077
exact-active-class 和 active-class 的区别 router-link 默认情况下的路由是模糊匹配，例如当前路径是 /article/1 那么也会激活 ，所以当设置 exact-active-class 以后，这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class。 当用户访问 /article/1...
vue-router二级路由会加上router-link-exact-active router-link-active
qq_30236067的博客
09-20 2892
vue-router二级路由会加上router-link-exact-active router-link-active 切换路由的时候，router-link-active会给二级添加， 一级路由加不上 解决方案 监听一下路由，动态添加class &lt;router-link tag="li" :to="{name: 'index_information'}" v-bind:class=...
解决vue3 el-menu 刷新页面菜单选中项和路由不匹配
hzxOnlineOk的博客
10-15 2837
网上找到的方法有2种： 1、给el-menu组件增加属性 :default-active="this.$route.path" 但是博主试了下，打印出来的路由this.$route.path一直是/，放弃 2、通过this.$router.currentRoute console.log('当前路由', this.$router.currentRoute); 所以我们可以通过this.$router.currentRoute._value.fullPath访问到当前激活的url，然后将.
router-默认配置
weixin_44756893的博客
07-06 295
router-默认配置 在默认的情况下，进入网站的首页，希望渲染首页的内容， 此时需要多配置一个路由映射。 const routes =[ { //重定向 多配置的一个路由映射 path:'', redirect:'/home' }, { path:'/home', component:Home }, { path:'/about', component:About } ] 改变网页hash模式 在index文件中，Rout
vue路由跳转后高亮问题|active class(激活状态)linkActiveClass 和 linkExactActiveClass以及exact
x_xiNan9416的博客
09-27 3745
linkActiveClass 是模糊匹配 linkExactActiveClass 是精准匹配 exact也是精准的意思 问题 看下边图片: 当css样式为#nav a.router-link-exact-active { color: #42b983; }时,如果下边没有子路由不会有什么问题,但是如果有子集路由的话,当你点击小说下边的子集路由小说就不会高亮 图片如下: 解决这个问题只需要改变css为#nav a.router-link-active { color: #42b983; } 对比初始的
vue 优化技巧路由及组件懒加载
秋水不寒的专栏
07-08 507
懒加载定义:懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。 解决方案:常用的懒加载方式有两种,即使用vue异步组件和ES中的import 未使用懒加载vue 路由代码 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ rou..
YDOOK:vue3:vue-cli4: router-link exact-active-class用法详细教程
YDOOK
03-01 466
YDOOK:vue3:vue-cli4: router-link exact-active-class用法详细教程 © YDOOK JY Lin 1. 使用方法： 类型: string 默认值: "router-link-exact-active" 配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。 2. 使用代码示例： <!-- 这个链接只会在地址为 / 的时候被激活 --> <
router:点击子路由时，父级路由的active属性消失
m0_64457414的博客
10-15 734
原因：把父级路由和子级路由的路径默认path:'/'，并且router-link都添加了exact： routes:[
html5 数据初始化,vuex按需加载，避免首页初始化所有数据
weixin_36460310的博客
06-05 296
大型项目中，不管首页需不需要那么多变量，vuex都会一次性打包进去，vuex会很大，因为都是一次性加载的需求：按需异步加载vuex解决方案如下第一步： 把.vue文件对应的vuex拆分出来，第二步：在xxx.vue文件里面添加 name 和 isNeedVuex 属性注意：为了保证引入store下的文件名字跟组件命名一样，请自行选择合理的命名方式第三步：用到 Vue.use 和 Vue.mixin...
解决vue-router-active无效问题
黑猫几绛的博客
05-24 2577
解决vue-router active-class无效问题 在自制tabBar中遇到了这些问题： （1）设置的样式中，path为'/'的icon始终被设置了active样式 解决办法: 由于router-link to的每个路由首部都存在'/'，因此都可以激活默认路由'/'，这也是为什么当path为'/'的时候始终有active样式，甚至出现了当点击其他tab按键时，出现了两个active样式。 在<router-linkto="/" >加上exact 属性 表示只有在地址为 /...
router-link-active和router-link-exact-active的区别
最新发布
06-25
在 Vue Router 中，`router-link-active` 和 `router-link-exact-active` 是两个用于控制导航链接激活状态样式的类名。它们的主要区别在于匹配路由的方式和粒度。 ### `router-link-active` - 该类名会在当前路由 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值