VUEJS中的路由器鏈接未顯示為活動狀態-有解無憂

我希望你度過了一個美妙的一周。問題是我已經學習 VUE 幾個星期了，但目前我正面臨 VUE 路由器的問題。以下是我面臨的問題：

1- 我已經注冊了 5 條路線，并且已經創建了它們對應的視圖。我創建了一個單獨的檔案呼叫“Navbar.vue”，我使用這個路由鏈接作為主導航選單。以下是我創建的路線鏈接：

家
關于
電影
演員
輪廓

輸出附在下面。

VUE JS 中的路由器鏈接未顯示為活動狀態

現在的問題是除了“電影”之外，每個鏈接都可以正常作業，我無法將滑鼠懸停在它上面。但是每當我洗掉副鏈接時，都會出現同樣的問題。以下是路由器鏈接的代碼：


   <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 控制臺輸出 VUE JS 中的路由器鏈接未顯示為活動狀態誰能指導我我到底缺少什么？PS 創建每條路由鏈接對應的視圖，并成功注冊每條路由。

謝謝

uj5u.com熱心網友回復：

第 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>

VUE JS 中的路由器鏈接未顯示為活動狀態演示

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/328319.html

標籤：html Vue.js Vuejs2 vue 组件 Vue路由器

上一篇：額外的嵌套<router-view/>不會從子路由渲染視圖

下一篇：vue.js屬性或方法未定義-嵌套組件