以下是以资深软件开发工程师的视角，对“Vue.js 路由”的专业回答。我将详细讲解 Vue.js 中路由的概念、实现方法、使用场景及其高级应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 15 日的最新信息，使用 Vue.js 3.x（最新稳定版）和 Vue Router 4.x 为参考。

Vue.js 路由

目录

  1. 引言
  2. Vue.js 路由概述
  1. 路由基本用法
  1. 高级路由功能
  1. 最佳实践与注意事项
  1. 结论

1. 引言

路由是单页应用（SPA）的核心功能，用于管理页面导航和视图切换。Vue.js 通过官方插件 Vue Router 提供了强大的路由支持，使得开发者能够轻松实现动态页面跳转。本教程将从基础到高级，带你掌握 Vue.js 路由的用法。

2. Vue.js 路由概述

2.1 什么是路由？

  • 定义：路由是指根据 URL 路径渲染对应视图的机制，在 SPA 中通过前端控制页面切换。
  • 类型：Hash 模式（#/）和 History 模式（/path）。

2.2 Vue Router 的作用

  • 功能：
  • 映射 URL 到组件。
  • 提供导航链接和路由视图。
  • 支持动态参数和守卫。
  • 参考：Vue Router 官方文档

3. 路由基本用法

3.1 安装与配置

  • 安装：
npm install vue-router@4
  • 配置（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: "/", component: Home },
  { path: "/about", component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;
  • 挂载（main.js）：
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

3.2 定义路由与导航

  • 路由视图：<router-view> 显示当前路由组件。
  • 导航链接：<router-link> 生成导航。
  • 示例：
<!-- App.vue -->
<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

3.3 实例：简单导航

以下是一个简单导航的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Vue.js 简单导航</title>
  <style>
    .nav { max-width: 400px; margin: 20px auto; }
    a { margin: 0 10px; }
  </style>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
    import { createRouter, createWebHistory } from "https://unpkg.com/vue-router@4/dist/vue-router.esm-browser.js";

    const Home = { template: "<h1>首页</h1>" };
    const About = { template: "<h1>关于我们</h1>" };

    const routes = [
      { path: "/", component: Home },
      { path: "/about", component: About }
    ];

    const router = createRouter({
      history: createWebHistory(),
      routes
    });

    const App = {
      template: `
        <div class="nav">
          <router-link to="/">首页</router-link> |
          <router-link to="/about">关于</router-link>
          <router-view></router-view>
        </div>
      `
    };

    createApp(App).use(router).mount("#app");
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开（需本地服务器支持）。
  • 效果：点击导航链接切换页面内容。

4. 高级路由功能

4.1 动态路由

  • 语法：path: "/path/:param"，通过 $route.params 访问参数。
  • 示例：
// router/index.js
const routes = [
  { path: "/user/:id", component: User }
];

// User.vue
<template>
  <h1>用户 ID: {{ $route.params.id }}</h1>
</template>

4.2 嵌套路由

  • 语法：在 routes 中添加 children。
  • 示例：
// router/index.js
const routes = [
  {
    path: "/dashboard",
    component: Dashboard,
    children: [
      { path: "profile", component: Profile },
      { path: "settings", component: Settings }
    ]
  }
];

<!-- Dashboard.vue -->
<template>
  <div>
    <h1>仪表盘</h1>
    <router-link to="/dashboard/profile">个人资料</router-link>
    <router-link to="/dashboard/settings">设置</router-link>
    <router-view></router-view>
  </div>
</template>

4.3 路由守卫

  • 全局守卫：
// router/index.js
router.beforeEach((to, from, next) => {
  if (to.path === "/admin" && !isAuthenticated) {
    next("/login");
  } else {
    next();
  }
});
  • 组件内守卫：
<script>
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.checkAccess();
    });
  },
  methods: {
    checkAccess() {
      console.log("检查权限");
    }
  }
};
</script>

5. 最佳实践与注意事项

5.1 路由管理

  • 模块化：将路由拆分到单独文件中管理。
  • 命名路由：
{ path: "/home", name: "home", component: Home }
<router-link :to="{ name: 'home' }">首页</router-link>

5.2 性能优化与调试

  • 性能：使用懒加载提升加载速度。
const Home = () => import("../views/Home.vue");
  • 调试：使用 Vue Router 的调试工具或浏览器开发者工具检查路由跳转。

6. 结论

Vue.js 路由通过 Vue Router 提供了强大的页面导航能力，支持动态路由、嵌套路由和守卫等功能。本文通过简单导航实例展示了其用法，帮助你掌握路由的核心技术。如果想深入学习，可参考 实例：简单导航 或访问 Vue Router 官方文档。

回答特点

  • 结构：遵循示例格式，包含目录、带锚点的小标题和代码示例。
  • 实用性：覆盖基础到高级用法，适合初学者和开发者。
  • 内部链接：通过 <a href="#ID"> 跳转，如 路由基本用法。
  • 出站链接：嵌入正文，如 Vue Router 官方文档。

如何运行

  1. 使用 CDN 方式，将示例代码保存为 HTML 文件并通过本地服务器运行。
  2. 或在 Vue CLI 项目中配置路由测试功能。

请确认此回答是否符合你的期望，或者提出下一个问题，我将继续按此格式回答！