Vue Router 学习指南

要在你的 Vite + Vue 项目中添加并全面学习 Vue Router，可以从以下几个步骤和知识点开始：

1. 安装 Vue Router

在你的项目中，运行以下命令安装 Vue Router：

yarn add vue-router@4

Vue Router 4 是专为 Vue 3 设计的版本，确保与你的 Vue 3 项目兼容。

2. 基本配置

在 src 文件夹中创建一个 router 文件夹，并添加 index.js 文件用于管理路由。基本的配置如下：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
 
const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
];
 
const router = createRouter({
  history: createWebHistory(),
  routes,
});
 
export default router;

3. 在 Vue 应用中注册 Router

在项目的 main.js 文件中注册路由：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
 
const app = createApp(App);
app.use(router);
app.mount('#app');

4. 使用路由链接

在组件中使用 <router-link> 标签来创建导航链接，并使用 <router-view> 来显示匹配的组件。例如：

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

5. 学习 Vue Router 的核心功能

• 动态路由：如 /user/:id，支持不同的 URL 参数。
• 嵌套路由：用于更复杂的页面布局。
• 路由守卫：比如 beforeEach、beforeEnter 等，用于在导航发生之前控制访问权限。
• 命名路由：方便进行参数传递。
• 编程式导航：使用 router.push 和 router.replace 在代码中动态导航。
• 懒加载路由：优化性能，根据需要按需加载组件。

6. 进阶概念

• 导航钩子：了解全局、路由独享、组件内导航守卫的使用。
• 滚动行为：控制页面滚动位置，例如返回顶部。
• 重定向和别名：指定路径的重定向或别名。
• 过渡动画：使用 Vue 的 <transition> 为路由切换添加动画。

Vue Router 的官方文档提供了详细的示例和 API 说明，可以帮助你更深入地掌握这些功能。