Vue 路由

Vue 极速入门 第 16 节：Vue 路由：从基础配置到高级用法

引言

Vue Router 是 Vue.js 官方推荐的路由管理库，专为单页面应用（SPA）设计。它通过动态路由、嵌套路由和懒加载等特性，帮助开发者构建高效、灵活的前端应用。本文将带你从基础配置到高级用法，全面掌握 Vue Router 的使用技巧。

---

1. Vue Router 基础：路由配置与导航守卫

1.1 什么是 Vue Router？

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用。它允许开发者通过 URL 映射到不同的组件，实现页面之间的无缝切换。

1.2 路由配置

目录结构

注意：本文所有案例都是依照此案例程序进行程序的解说。

project/
├── src/
│   ├── router/
│   │   └── index.js
│   ├── views/
│   │   ├── Home.vue
│   │   └── About.vue
│   ├── App.vue
│   └── main.js
├── index.html
└── package.json

文件解释：

• router/index.js：Vue Router 配置文件。
• views/Home.vue 和 views/About.vue：路由对应的视图组件。
• App.vue：主组件，使用 <router-view> 渲染路由组件。

在使用 Vue Router 之前，请先打开 Vue 项目所在根目录下输入指令进行安装：

# Vue2 项目
npm install vue-router@3

# Vue3 项目
npm install vue-router@4

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;

main.js

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

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

---

1.3 导航守卫

导航守卫是 Vue Router 提供的一种机制，用于在路由跳转前或跳转后执行某些操作。

router/index.js

router.beforeEach((to, from, next) => {
   
  console.log('从', from.path, '跳转到', to.path);
  next(); // 必须调用 next() 才能继续路由跳转
});

router.afterEach((to, from) => {
   
  console.log('已完成跳转：', to.path);
});

---

2. 动态路由与嵌套路由：实现复杂页面结构

2.1 动态路由

动态路由允许根据 URL 参数动态加载不同的组件。

router/index.js

import {
    createRouter, createWebHistory } from 'vue-router';
import User from '../components/User.vue'; // 确保导入 User 组件

const routes = [
  {
   
    path: '/user/:id',
    name: 'User',
    component: User // 确保组件正确绑定
  }
];

const router = createRouter({
   
  history