Vue 路由配置详解

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 核心深度集成，让构建单页面应用变得易如反掌。本文将详细介绍 Vue 路由配置的基本概念和高级用法。

1. 安装和基本配置

首先，你需要安装 Vue Router：

npm install vue-router@4

然后，在你的 Vue 项目中创建一个 router 文件夹，并在其中创建一个 index.js 文件，用于配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他路由配置...
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  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');

2. 基本路由配置

在 Vue Router 中，路由配置是通过一个包含多个路由对象的数组来表示的。每个路由对象至少包含 path 和 component 属性。

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

你还可以为路由添加 name 属性，以便在导航时使用：

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

3. 动态路由匹配

动态路由匹配允许你根据 URL 参数渲染不同的组件。要实现这一点，你需要在路由路径中使用冒号 : 标记参数名称。

const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

在组件内部，你可以通过 $route.params 对象访问这些参数：

export default {
  mounted() {
    console.log(this.$route.params.id);
  }
};

4. 导航守卫

导航守卫是 Vue Router 提供的一种机制，允许你在路由发生变化之前或之后执行一些逻辑。常见的导航守卫有全局守卫、路由独享守卫和组件内守卫。

4.1 全局守卫

全局守卫可以在路由实例上直接调用，例如 beforeEach 和 afterEach。

router.beforeEach((to, from, next) => {
  // 在这里执行一些逻辑
  next();
});

router.afterEach((to, from) => {
  // 在这里执行一些逻辑
});

4.2 路由独享守卫

路由独享守卫可以直接在路由配置中定义，例如 beforeEnter。

const routes = [
  {
    path: '/protected',
    component: Protected,
    beforeEnter: (to, from, next) => {
      // 在这里执行一些逻辑
      next();
    }
  }
];

4.3 组件内守卫

组件内守卫可以在组件内部定义，例如 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。

export default {
  beforeRouteEnter(to, from, next) {
    // 在这里执行一些逻辑
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在这里执行一些逻辑
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在这里执行一些逻辑
    next();
  }
};

5. 嵌套路由

嵌套路由允许你在一个路由组件内部定义子路由，从而实现更复杂的页面结构。

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];

在这个例子中，当访问 /user/1/profile 时，会渲染 UserProfile 组件；访问 /user/1/posts 时，会渲染 UserPosts 组件。