vue.js - VueJs 3.0 NavBar 跨路线不粘

Question

VueJs 新手并使用 3.0 版本。使用 Vue 路由器并有 2 个路由（登录，关于）。NavBar 在登录和关于页面上都没有粘性。它只在主页上看到。文档说，使用 router-link 应该使导航栏具有粘性。我错过了什么？这是我的代码。

应用程序.vue

<template>
  <Navbar />
  <router-view />
</template>

<script>
import Navbar from '@/components/Navbar'
export default {
  name: 'App',
  components: {
    Navbar
  }
}
</script>

路由器/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  {
    path: '/about',
    name: 'About',
    component: () =>
      import('../views/About.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

组件/Navbar.vue

<template>
  <div class="navbar navbar--extended">
    <nav class="nav__mobile"></nav>
      <div class="navbar__inner">
        <a href='/' class="navbar__logo">Logo</a>
        <nav class="navbar__menu">
          <ul>
            <li><router-link to="/">Home</router-link></li>
            <li><router-link to="login">Log in</router-link></li>
            <li><router-link to="about">About</router-link></li>
          </ul>
        </nav>
  </div>
</template>

<script>
export default {
  name: 'Navbar'
}
</script>

意见/about.vue

<template>
  <div>
    <h1>This is an about page</h1>
  </div>
</template>

标签： vue.jsvue-routervuejs3