Vue.js 路由是构建单页面应用（SPA）的重要组成部分。本教程将介绍如何使用 Vue Router 创建和管理路由。

路由基础

Vue Router 是 Vue.js 官方的路由管理器。它允许你为单页面应用定义路由和嵌套路由。

安装

首先，你需要安装 Vue Router。可以通过 npm 或 yarn 安装：

npm install vue-router
# 或者
yarn add vue-router

创建路由

在 Vue 应用中，你可以通过创建路由定义来配置路由。以下是一个简单的路由定义示例：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
});

路由导航

在 Vue 组件中，你可以使用 router.push() 方法来导航到不同的 URL：

this.$router.push('/about');

你也可以使用 router.replace() 来替换当前的历史记录：

this.$router.replace('/about');

动态路由匹配

Vue Router 允许你定义动态路由，以便匹配不同的 URL。以下是一个动态路由的示例：

{
  path: '/user/:id',
  name: 'user',
  component: User
}

在这个例子中，:id 是一个动态片段，它会匹配 /user/123、/user/abc 等路径。

嵌套路由

嵌套路由允许你在子路由中定义路由。以下是一个嵌套路由的示例：

{
  path: '/user/:id',
  component: User,
  children: [
    {
      path: 'profile',
      name: 'user-profile',
      component: UserProfile
    },
    {
      path: 'posts',
      name: 'user-posts',
      component: UserPosts
    }
  ]
}

在这个例子中，/user/:id/profile 和 /user/:id/posts 都会被匹配到 User 组件，但它们会渲染不同的子组件。

路由守卫

Vue Router 提供了路由守卫，允许你在路由发生变化时执行逻辑。以下是一些常用的路由守卫：

  • 全局守卫：在路由跳转之前全局执行
  • 路由独享守卫：在路由内部执行
  • 组件内守卫：在路由组件内部执行

全局守卫

router.beforeEach((to, from, next) => {
  // ...
});

路由独享守卫

{
  path: '/user/:id',
  component: User,
  beforeEnter: (to, from, next) => {
    // ...
  }
}

组件内守卫

export default {
  // ...
  beforeRouteEnter(to, from, next) {
    // ...
  },
  beforeRouteUpdate(to, from, next) {
    // ...
  },
  beforeRouteLeave(to, from, next) {
    // ...
  }
}

总结

Vue Router 是 Vue.js 应用中构建单页面应用的重要工具。通过本教程，你了解了如何使用 Vue Router 创建和管理路由，包括动态路由、嵌套路由和路由守卫。

了解更多关于 Vue Router 的信息

Vue Router