初探 Vue Router 4：掌握下一代路由管理

2023-12-16 00:47:12

在快速发展的 Vue.js 生态系统中，路由一直是至关重要的组成部分，它使我们能够在应用程序中管理不同的视图和状态。随着 Vue 3 的发布，Vue Router 也迎来了重大更新，现在让我们深入探索 Vue Router 4 的新特性和最佳实践。

Vue Router 4 的优势

Vue Router 4 带来了多项改进，包括：

基于组合式的 API： 在 Vue 3 中，路由不再需要作为 Vue 插件注册，而是使用 Composition API 提供的组合式函数直接在组件中使用。这简化了路由配置，并使应用程序架构更加清晰。
更直观的导航： 使用 useRouter 组合式函数，我们可以轻松地访问路由实例并执行导航操作。新的 navigate 方法提供了统一的方式来处理所有导航场景，包括常规导航、带有查询参数的导航和带有片段标识符的导航。
增强型错误处理： Vue Router 4 引入了更好的错误处理，使我们能够捕获和处理导航错误。这有助于提高应用程序的健壮性，并向用户提供清晰的反馈。

初识 Vue 3 路由

与 Vue 2 中的路由不同，Vue 3 路由不再需要使用全局的 VueRouter 实例。相反，我们可以在需要时在单个组件中使用 useRouter 组合式函数。

import { useRouter } from 'vue-router';

const App = {
  setup() {
    const router = useRouter();

    // 使用 router.push() 进行导航
    router.push('/about');
  }
}

Vue 3 路由与 Vue 2 路由的区别

特性	Vue 3 路由	Vue 2 路由
实例化	在组件中使用 `useRouter()`	全局注册 VueRouter 实例
导航	使用 `router.push()` 和 `router.replace()`	使用 `this.$router.push()` 和 `this.$router.replace()`
响应式	路由信息是响应式的	路由信息是响应式的
命名路由	支持命名路由	支持命名路由
路由元信息	使用 `meta` 属性	使用 `meta` 属性
路由守卫	使用 `onBeforeRouteUpdate()` 和 `onBeforeRouteLeave()`	使用 `beforeRouteUpdate()` 和 `beforeRouteLeave()`

Vue Router 4 中的 Setup

在 Vue 3 中，我们可以在 setup() 函数中使用路由。这使得我们在组件初始化时就可以访问路由信息，并对其进行响应。

import { useRouter } from 'vue-router';

const About = {
  setup() {
    const router = useRouter();

    // 响应路由变化
    watch(
      () => router.currentRoute.value,
      (newRoute, oldRoute) => {
        // 做一些事情
      }
    );
  }
}

编写技术指南：Vue Router 4 使用指南

步骤 1：安装 Vue Router

npm install vue-router@4

步骤 2：创建路由表

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

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

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

步骤 3：在应用程序中使用路由

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

const app = createApp(App);

app.use(router);

app.mount('#app');