vue路由当前页调用当前页出现 class: router-link-exact-active ，从而导致无法跳转的问题

最新推荐文章于 2024-07-24 07:45:00 发布

原创最新推荐文章于 2024-07-24 07:45:00 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #路由传参 #class #跳转失败

vue 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种使用路由变化来触发数据请求的方法。通过观察路由参数的变化，可以动态更新页面展示的内容。具体实现上，利用了 Vue.js 的 watch 特性来监听路由变化，并调用 ajaxData 方法获取新的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

watch:{
        '$route'(to,from){
            this.articleId = this.$route.params.article_id;

            this.ajaxData()
        }
    },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Young_Gao

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue-Router的使用详解

nanxing的博客

07-07

1221

Vue-Router的使用详解认识路由渲染 & 路由URL的hash & HTML5的History使用 vue-router基本使用其他小补充router-link属性路由懒加载 (常用)动态路由基本使用获取动态路由的值匹配多个参数NotFound路由的嵌套代码实现路由跳转query方式的参数发送接收router-link的补充router-link的插槽router-view的补充router-view的插槽动态添加路由路由守卫认识路由渲染 & 路由后端渲染 & 前

前端开发：vue-router的使用以及两种模式的区别

全沾软贱开发攻城狮

05-01

1万+

前言在前端开发中，使用Vue做项目的时候关于路由的管理处理是非常重要的知识点，路由的管理也是比较常用的，做前端开发的都知道SPA，通过唯一一个HTML页面完成所有组件的展示和切换，不同组件之间的切换需要通过路由来实现。vue-router是Vue的官方路由插件，为的就是Vue单页面开发的路由，处理页面跳转的，那么本篇博文就来分享一下关于vue-router相关的知识点，该知识点在前端求职面试中也是高频考察知识点，这里总结一下，方便查阅使用。 vue-router概念　router的中文释...

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

技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效

yangyangdt的博客

01-05

2977

vue3中按vue2做，router-link并不能变样式，并且还是官方的绿色样式，显然在vue3中这个属性已经不适用了。因为在vue2中...

vue 路由跳转自定义 class 不存在(被覆盖) router-link-active

cc_King的博客

05-08

611

文章目录问题描述解决办法问题描述页面第一次加载的时候(页面初始化)的时候，自定义路由是生效的；但是路由跳转出去之后，跳回来，class就设置不上了；一开始以为自己代码逻辑有问题，检查半天不是；换一个方法写，还是只有第一次加载失效，那么肯定不是我代码逻辑的问题了； debugger 发现，自定义 class 其实是加上去的，但是最后却不见了 (一_一)，懵逼ing…；折磨半天，突然反应过来 router-link-active 这个小东西不也是加上去的吗？会不会是覆盖了；那么问题来了 rou

active vue 路由样式保持_Vue 解决父组件跳转子路由后当前导航active样式消失问题...

weixin_32968007的博客

02-06

639

举个栗子，导航栏如下图，当前新闻资讯的路由是：localhost:8083/#/new，导航栏样式如图所示：随便挑个新闻点击后会跳转到子路由：localhost:8083/#/new/newDetail，这时候新闻资讯的主路由style样式出现消失的问题，如下图：style代码：.router-link-exact-active{color: #8fc526!important;border-to...

vue 嵌套路由，router-link-active的问题

weixin_30770495的博客

11-20

450

最近开发的过程中，遇到一个嵌套路由的问题，需求是这这样的，首页三个路由 a b c 路由写法是 export default new Router({ routes: [ // { // path: '/', // component: '' // }, // { // path: '/history-grade', ...

vue-router中的exact 到底是用来干嘛的?

寂寥人生

08-27

4351

目前唯一用到的场景是导航切换问题, 切换到别的路由的时候,激活样式都一直存在的加上 exact 关键字之后就可以了有补充的同学,可以给我留言,帮助一起成长 ...

详解vue中router-link标签所必备了解的属性

10-17

<router-link to="/route2" exact-active-class="exact-active">Route2</router-link> ``` 当/route2完全匹配当前路由时，上述代码会被渲染为带有_class="exact-active"的a标签。 ```html <router-link to="/route...

【vue-router源码】十二、useRoute、useRouter、useLink源码分析

MAXLZ的博客

06-13

2249

【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该篇文章将分析useRoute、useRouter、useLink的实现。

vue-router总结

weixin_47450807的博客

02-20

4629

一、前言本篇博客主要是总结一下vue-router，将总结一下vue-router中的常用的api。二、认识前端路由路由其实是网络工程中的一个术语，在架构一个网络时，非常重要的两个设别是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器,事实上，路由器主要维护的是一个映射表，映射表会决定数据的流向。路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段，前后端分离阶段，单页面复应用(SPA)阶段。一

vue路由跳转后高亮问题|active class(激活状态)linkActiveClass 和 linkExactActiveClass以及exact

x_xiNan9416的博客

09-27

3742

linkActiveClass 是模糊匹配 linkExactActiveClass 是精准匹配 exact也是精准的意思问题看下边图片: 当css样式为#nav a.router-link-exact-active { color: #42b983; }时,如果下边没有子路由不会有什么问题,但是如果有子集路由的话,当你点击小说下边的子集路由小说就不会高亮图片如下: 解决这个问题只需要改变css为#nav a.router-link-active { color: #42b983; } 对比初始的

解决vue-router-active无效问题

黑猫几绛的博客

05-24

2562

解决vue-router active-class无效问题在自制tabBar中遇到了这些问题：（1）设置的样式中，path为'/'的icon始终被设置了active样式解决办法: 由于router-link to的每个路由首部都存在'/'，因此都可以激活默认路由'/'，这也是为什么当path为'/'的时候始终有active样式，甚至出现了当点击其他tab按键时，出现了两个active样式。在<router-linkto="/" >加上exact 属性表示只有在地址为 /...

vue的active-class和exact-active-class的作用和区别

Wancc123的博客

03-08

2700

active-class基本使用设置链接激活时使用的 CSS 类名。可以通过以下代码来替代。被激活时 Router Link 1 背景颜色显示红色 <style> ._active{ background-color : red; } </style> <p> <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link

router-link-active和router-link-exact-active

HWL5679的博客

07-24

938

在Vue Router中，router-link-active是一个动态类名，用于表示当前激活的路由链接。

Vue路由中的router-link-exact-active和router-link-active

vue路由 当前页调用当前页 出现 class: router-link-exact-active ，从而导致无法跳转的问题

vue路由当前页调用当前页出现 class: router-link-exact-active ，从而导致无法跳转的问题