Vue全家桶之一——Vue Router🧑🏻‍💻

引言

在 Web 应用中，页面的跳转和管理是至关重要的功能之一。Vue Router 作为 Vue 全家桶的重要组成部分，为 Vue 应用提供了强大的路由管理能力。它不仅能够实现页面的无缝跳转，还能保持应用的状态和数据一致性。

本文将详细解析 Vue Router 的核心概念、配置及使用方法，帮助你更好地理解和应用这一强大的工具。

一. Vue Router 的基本概念

Vue Router 是一个专门用于 Vue.js 的路由管理库。它通过将 URL 映射到组件，实现页面的跳转和管理。与传统的 <a> 标签不同，Vue Router 提供的 <router-link> 组件能够实现无刷新的页面跳转，从而提升用户体验。

二. 路由配置

在 Vue Router 中，路由的配置是通过定义一系列的路由规则来实现的。每个路由规则包括一个路径 (path) 和一个对应的组件 (component)。这些路由规则被组织在一个数组中，并通过 createRouter 函数创建路由实例。

javascript 复制代码

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import PostIndex from '../views/post/index/post-index.vue';
import PostShow from '../views/post/show/post-show.vue';

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

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

export default router;

在上述代码中，定义了一个前端路由系统，使得 Vue 应用可以在不同页面（组件）之间进行导航，而不会触发完整的页面刷新。

代码详解

1. 导入 Vue Router

javascript 复制代码

import { createRouter, createWebHashHistory } from 'vue-router';

createRouter：Vue Router 4 的 API，用于创建路由实例。
createWebHashHistory：使用 Hash 模式 （URL 以 # 号作为分隔），保证页面刷新时不会丢失路由信息。

2. 导入路由组件

javascript 复制代码

import Home from '../views/Home.vue';
import About from '../views/About.vue';
import PostIndex from '../views/post/index/post-index.vue';
import PostShow from '../views/post/show/post-show.vue';

这里导入了四个 Vue 组件，每个组件代表一个页面：
- Home.vue（首页）
- About.vue（关于页）
- PostIndex.vue（文章列表页）
- PostShow.vue（文章详情页）

3. 定义路由规则

lua 复制代码

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

routes 数组定义了所有路由规则，每个路由对象包含：
- path：URL 路径。
- component：对应的 Vue 组件。
/posts/:postId：
- :postId 是一个动态路由参数，意味着 URL /posts/1、/posts/2 都会匹配 PostShow 组件，postId 的值可以在组件内部通过 $route.params.postId 获取。

4. 创建路由实例

ini 复制代码

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

createRouter 创建一个 Vue Router 实例：
- history: createWebHashHistory()：
  - 使用 Hash 模式 ，即 URL 形如 http://example.com/#/about。
  - 适用于所有服务器环境，因为不会出现 404 问题（不像 createWebHistory() 需要服务器配置）。
- routes：前面定义的路由规则数组。

5. 导出路由

arduino 复制代码

export default router;

三. 在 Vue 应用中使用路由

要在 Vue 应用中使用 Vue Router，需要在主应用实例中进行配置。

javascript 复制代码

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

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

在上述代码中，我们通过 createApp 函数创建了 Vue 应用实例，并通过 use 方法将路由实例添加到应用中。最后，通过 mount 方法将应用挂载到页面的指定元素上。

四. 路由链接与视图

在 Vue Router 中，<router-link> 组件用于创建路由链接，它类似于传统的 <a> 标签，但能够实现无刷新的页面跳转。而 <router-view> 组件用于显示当前路由对应的组件。

xml 复制代码

<template>
  <div class="page">
    <header class="page-header">
      <h3 class="brand">{{ name }}</h3>
      <nav class="menu">
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-link to="/posts">内容</router-link>
      </nav>
    </header>
    <main class="page-body">
      <router-view />
    </main>
  </div>
</template>

<script setup>
const name = "Vue Router 教程";
</script>

在上述代码中：

使用 <router-link> 创建了三个路由链接。
使用 <router-view> 组件来动态渲染当前路由匹配的组件。

五. 路由参数与动态路由

Vue Router 支持动态路由，即在路径中使用参数。例如，下面的路径 :postId 代表一个动态参数：

css 复制代码

{
  path: '/posts/:postId',
  component: PostShow
}

在组件 PostShow.vue 中，我们可以通过 $route.params.postId 获取当前路由的 postId 参数。

xml 复制代码

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const postId = route.params.postId;
</script>

六. 路由守卫

路由守卫是 Vue Router 提供的一个功能，用于在路由跳转过程中执行一些逻辑。例如，可以在用户未登录时拦截某些页面访问。

javascript 复制代码

router.beforeEach((to, from, next) => {
  console.log('路由跳转之前');
  next();
});

router.afterEach((to, from) => {
  console.log('路由跳转之后');
});

在上述代码中：

beforeEach 方法在路由跳转前执行。
afterEach 方法在路由跳转后执行。

七. 结论

Vue Router 作为 Vue 全家桶中的重要组成部分，为 Vue 应用提供了强大的路由管理能力。通过合理配置路由规则、使用路由链接和视图组件，以及利用路由守卫，我们可以实现复杂的页面跳转和管理逻辑。