深入解析【Vue3】路由【Vue Router】

Vue Router 是 Vue.js 官方的路由管理器，专门用于 Vue.js 应用中的路由功能。在 Vue 3 中，Vue Router 进行了许多改进，使得路由管理更加灵活和高效。本文将详细介绍 Vue 3 路由的基本概念、核心特性以及如何在实际项目中使用它。

什么是 Vue Router？

Vue Router 允许开发者在单页面应用（SPA）中管理不同的视图。通过路由，开发者可以根据不同的 URL 显示不同的组件。Vue Router 提供了丰富的功能，包括动态路由、嵌套路由、路由守卫等，能够满足复杂应用的需求。

安装 Vue Router

在使用 Vue 3 创建项目时，可以通过 npm 或 yarn 安装 Vue Router：

npm install vue-router

或者

yarn add vue-router

创建基本路由

首先，需要创建一个路由实例并配置路由规则。以下是一个简单的示例：

// router/index.ts
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;

在上面的代码中，我们定义了两个路由：Home 和 About，并指定了对应的组件。createWebHistory 方法用于创建一个 HTML5 History 模式的路由历史管理器。

在 Vue 应用中使用路由

在 Vue 应用中使用路由非常简单。你只需在主文件中引入路由实例并将其挂载到 Vue 应用上：

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

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

路由视图

在组件中显示路由内容，可以使用 <router-view> 组件。它会根据当前路由的路径渲染相应的组件。

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view />
  </div>
</template>

<router-link> 组件用于创建路由链接，to 属性指定链接的目标路径。

动态路由

动态路由允许在路径中使用参数。比如，我们可以定义一个用户信息页面，路径中包含用户 ID：

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

在组件中，可以通过 this.$route.params.id 访问动态参数：

<script>
export default {
  mounted() {
    const userId = this.$route.params.id;
    console.log(`User ID: ${userId}`);
  }
}
</script>

嵌套路由

Vue Router 支持嵌套路由，可以创建复杂的视图结构。例如，我们可以在 User 组件中嵌套更多的子路由：

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

在 User 组件中，可以使用 <router-view> 来显示嵌套的子路由组件。

路由守卫

路由守卫允许我们在路由变化前或后执行某些操作，常用于权限控制和数据预加载。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫。

全局守卫示例

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

在这个例子中，我们检查目标路由是否需要认证，如果需要且用户未登录，则重定向到登录页面。

路由懒加载

为了优化应用性能，可以使用路由懒加载。通过动态导入组件，可以在用户访问相应路由时才加载对应的组件。

const routes = [
  {
    path: '/about',
    component: () => import('../views/About.vue')
  }
];