VUE JS中的路由器链路未显示为活动状态 [英] Router Link in VUE JS is not showing active

问题描述

我希望你这一周过得很愉快。问题是，我现在学习VUE已经有几个星期了，但目前我面临着VUE路由器的问题。以下是我面临的问题：

1-我已经注册了5条路由，并且已经创建了相应的视图。我已经创建了一个单独的文件，名为&Navbar.vue"；，在该文件中，我使用此路由链接作为主要导航菜单。以下是我创建的路由链接：

• 主页
• 关于
• 电影
• 演员
• 配置文件

输出附加在下面。

2. 现在的问题是，除了&电影&之外，所有链接都工作得很好，我无法将鼠标悬停在它上面。但是每当我把它去掉的时候，副官链接就会显示同样的问题。以下是路由器链路的代码：

   <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创建每条路由链接的对应视图，并成功注册每条路由。

谢谢

推荐答案

第一步：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>

第二步：创建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;

第三步：为活动班级添加style

 <style>
.link {
  margin: 10px;
}
.link.active {
  background-color: red;
  color: white;
}
</style>

DEMO

这篇关于VUE JS中的路由器链路未显示为活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！