Vue路由器：开篇基础

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

Vue 路由基础使用详解

Vue 路由（Vue Router）是一个官方的路由管理器，用于构建单页面应用（SPA）。它允许我们定义应用的路径和对应的组件，用户在页面中点击不同的链接时，Vue Router 会根据配置切换对应的组件，避免整个页面刷新。

以下是通过 <script setup> 语法糖实现的 Vue 路由的详细说明和代码示例。

---

1. App.vue 中的基本模板

在 App.vue 中，我们可以使用 <RouterLink> 和 <RouterView> 组件来实现路由导航和展示对应的页面内容。

代码示例：

<template>
  <h1>Hello App!</h1>
  <p>
    <strong>Current route path:</strong> {
  
  { $route.fullPath }}
  </p>
  
  <!-- 路由链接 -->
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>

  <!-- 路由视图，显示匹配的组件 -->
  <main>
    <RouterView />
  </main>
</template>

<script setup>
// 可以在这里进行一些初始化操作，如路由或状态管理等
</script>

解释：

• <RouterLink> 是一个用于导航的组件，相当于 <a> 标签。to 属性指定跳转的目标路径。
• <RouterView> 是一个占位符组件，它会根据当前的路由匹配显示对应的组件。
• $route 是 Vue Router 提供的响应式对象，包含当前路由的信息（如路径、参数等）。$route.fullPath 会返回完整的路由路径。

---

2. 创建路由器实例

要启用 Vue 路由，首先需要在项目中创建一个路由器实例，并配置路由规则。

代码示例：

// src/router/index.js
import {
   
    createRouter, createWebHistory } from 'vue-router';

// 引入组件
import Home from '../views/Home.vue';
import About from '../views/About.vue'