Step 1: Install Router

我们需要安装 Vue Router

让我们创建一个视图文件夹来存储所有不同的页面

Step 2. Creating Views

在 src/views 目录下新建两个文件（如果没有该目录，请先创建）：

• HomeView.vue

  • 这个文件包含已有的注册表单。
  • 只需将 LibraryRegistrationForm.vue 重命名为 HomeView.vue，并移到 src/views 目录即可。
• AboutView.vue

  • 这是一个新页面，展示关于图书馆的信息。

Step 3. Now it is time to setup the router.

在 src/router/index.js 中创建文件：

Step 4: Modify Main App Component

更新主组件（通常是 App.vue）以使用路由

注释掉 LibraryForm，使用<router-view></router-view>

Step 5. Modify the navigation menu

打开你的 Header 组件（BHeader.vue），它目前的样子如下：

我们需要把导航改为使用 router-link：

• 把 <a> 标签换成 <router-link>。
• <router-link> 会更新 URL，并保持应用与浏览器历史同步。

Step 6. Update Main.js

修改你的 main.js 文件以使用router

Step 7: Test Your Router

运行您的应用程序并使用导航栏中的链接在主页和关于页面之间导航。

Step 8: Clean-up!

最后，清理一下 CSS，让网站风格一致：

• 把原来在 LibraryForm 中定义的 container 样式移动到 App.vue，保证所有页面一致。
• 使用一致的 Bootstrap 元素来显示头部。

预期输出