第6篇：Vue 路由管理与页面跳转

在上一节中，我们学习了如何处理表单与数据校验。在单页面应用 (SPA) 开发中，路由管理是实现页面跳转和内容切换的核心功能。Vue 提供了 Vue Router 来实现高效的路由管理。本篇将详细介绍 Vue Router 的使用方法。

1. 安装 Vue Router

Vue Router 是 Vue 官方提供的路由管理工具。在 Vue CLI 创建的项目中，可以使用以下命令来安装 Vue Router：

npm install vue-router@4

安装完成后，即可在项目中使用 Vue Router。

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;

解释：

• createRouter：用于创建一个路由实例。
• createWebHistory：启用 HTML5 模式的历史记录。
• routes：定义路由规则，包括路径和对应的组件。

3. 在项目中使用路由

将配置好的路由引入到 main.js 中，并挂载到 Vue 应用中。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router) // 使用路由实例
  .mount('#app');

然后，在 App.vue 文件中使用 <router-view> 渲染路由组件。

<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link>
      | 
      <router-link to="/about">关于我们</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style scoped>
nav {
  margin: 20px;
}
nav a {
  text-decoration: none;
  margin: 0 10px;
}
</style>

解释：

• <router-link>：用于实现页面导航，to 属性指定目标路径。
• <router-view>：渲染当前路由对应的组件。

4. 嵌套路由

Vue Router 支持嵌套路由，可以在某个路由下定义子路由。

示例：配置嵌套路由

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import User from '@/views/User.vue';
import UserProfile from '@/views/UserProfile.vue';
import UserSettings from '@/views/UserSettings.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    children: [
      {
        path: 'profile',
        name: 'UserProfile',
        component: UserProfile
      },
      {
        path: 'settings',
        name: 'UserSettings',
        component: UserSettings
      }
    ]
  }
];

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

export default router;

在父组件中添加 <router-view>，渲染子路由：

<template>
  <div>
    <h2>用户中心</h2>
    <nav>
      <router-link to="/user/profile">个人资料</router-link>
      | 
      <router-link to="/user/settings">账户设置</router-link>
    </nav>
    <router-view />
  </div>
</template>

5. 动态路由与参数传递

动态路由可以匹配不同的 URL 并传递参数。

示例：动态路由配置

// 路由配置
{
  path: '/user/:id',
  name: 'UserDetail',
  component: UserDetail
}

在组件中获取参数：

<script>
export default {
  mounted() {
    console.log(this.$route.params.id); // 获取动态路由参数
  }
};
</script>

6. 路由守卫

路由守卫用于控制页面访问权限，例如验证用户是否登录。

示例：全局前置守卫

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

7. 总结

在本篇中，你学习了：

• 如何安装并配置 Vue Router。
• 如何使用 <router-link> 和 <router-view> 实现页面跳转。
• 如何配置嵌套路由和动态路由。
• 如何使用路由守卫控制页面访问。

下一篇中，我们将学习 Vue 的状态管理与 Vuex。