VUE JS 中的路由器链接未显示为活动状态

Posted 2023-02-16

【中文标题】VUE JS 中的路由器链接未显示为活动状态

【英文标题】：Router Link in VUE JS is not showing active

【发布时间】：2021-12-06 01:58:26

【问题描述】：

我希望你度过了美好的一周。问题是我现在正在学习 VUE 几个星期，但目前我正面临 VUE 路由器的问题。以下是我面临的问题：

1- 我已经注册了 5 条路线，并且已经创建了它们对应的视图。我创建了一个名为“Navbar.vue”的单独文件，我使用这个路由链接作为主导航菜单。以下是我创建的路线链接：

首页 关于 电影 演员 简介

输出附在下面。

现在的问题是除了“电影”之外的每个链接都可以正常工作，我无法将鼠标悬停在它上面。但是每当我删除副链接时，都会出现同样的问题。以下是路由器链接的代码：

   <div class="navLink col-3">
                      <router-link  class="link" to="/">Home</router-link>
                      <router-link class="link"  to="/about">About</router-link> 
                      <router-link class="link"  to="/movies">Movies</router-link> 
                      <router-link class="link"  to="/actors">Actors</router-link> 
                      <router-link class="link"  to="/profile">Profile</router-link> 
               </div>

路线注册

const routes = [
  
    path: '/',
    name: 'Home',
    component: Home,
  ,
  
    path: '/about',
    name: 'About',
    component:About,
  ,
  
    path: '/actors',
    name: 'Actors',
    component: Actors,
  ,
  
    path: '/movies',
    name: 'Movies',
    component: Movies,
  ,
  
    path: '/profile',
    name: 'Profile',
    component: Profile,
  ,
];

const router = createRouter(
  history: createWebHashHistory(),
  routes,
);

html 控制台输出 谁能指导我我到底错过了什么？ PS 每个路由链接对应的视图都创建好了，每个路由都注册成功了。

谢谢

【问题讨论】：

这能回答你的问题吗？ How to VueJS router-link active style

你在vue router的“const routes”中正确注册了这些路由吗？你能告诉我们那些路线吗？

我已经编辑了我的问题（添加了路线注册码）请检查:)

您的浏览器控制台说什么？浏览器中的 html 输出是什么？你能检查并添加截图吗？

@frank 我添加了有问题的 HTML 控制台输出

【参考方案1】：

第 1 步： HTML 模板

 <template>
  <div id="app">
    <div class="navLink col-3">
      <router-link class="link" to="/">Home</router-link>
      <router-link class="link" to="/about">About</router-link>
      <router-link class="link" to="/movies">Movies</router-link>
      <router-link class="link" to="/actors">Actors</router-link>
      <router-link class="link" to="/profile">Profile</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

第 2 步： 创建router

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import About from "../components/About.vue";
import Actors from "../components/Actors.vue";
import Movies from "../components/Movies.vue";
import Profile from "../components/Profile.vue";

Vue.use(VueRouter);

const routes = [
  
    path: "/",
    name: "Home",
    component: Home
  ,
  
    path: "/about",
    name: "About",
    component: About
  ,
  
    path: "/actors",
    name: "Actors",
    component: Actors
  ,
  
    path: "/movies",
    name: "Movies",
    component: Movies
  ,
  
    path: "/profile",
    name: "Profile",
    component: Profile
  
];

const router = new VueRouter(
  mode: "history",
  linkExactActiveClass: "active",
  routes
);

export default router;

第 3 步：为活动课程添加 style

 <style>
.link 
  margin: 10px;

.link.active 
  background-color: red;
  color: white;

</style>

DEMO

【讨论】：

非常感谢，亲爱的它可以工作:)

@MuhammadKhan 这是我的荣幸！接受并为答案竖起大拇指！