怎么使用VueRouter4.x

Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，使得构建单页面应用（SPA）变得轻而易举。Vue Router 4.x 是 Vue 3 的配套路由库，它带来了许多新特性和改进。本文将详细介绍如何使用 Vue Router 4.x，包括基本用法、高级特性以及一些最佳实践。

1. 安装 Vue Router 4.x

首先，你需要确保你已经安装了 Vue 3。然后，你可以通过 npm 或 yarn 来安装 Vue Router 4.x。

npm install vue-router@4

或者

yarn add vue-router@4

2. 基本用法

2.1 创建路由实例

在使用 Vue Router 之前，你需要创建一个路由实例。你可以通过 createRouter 函数来创建路由实例。

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

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

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

export default router;

在上面的代码中，我们定义了两个路由：/ 和 /about。每个路由都对应一个组件，这些组件会在路由匹配时被渲染。

2.2 在 Vue 应用中使用路由

创建好路由实例后，你需要在 Vue 应用中使用它。通常，你会在 main.js 或 main.ts 文件中将路由实例挂载到 Vue 应用上。

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

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

2.3 路由视图

在 Vue 应用中，你需要使用 <router-view> 组件来渲染匹配的组件。通常，你会将 <router-view> 放在 App.vue 文件中。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

2.4 导航

你可以使用 <router-link> 组件来创建导航链接。

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

你也可以在 JavaScript 中使用 router.push 或 router.replace 来进行编程式导航。

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

3. 动态路由

Vue Router 支持动态路由匹配。你可以通过在路由路径中使用动态段来实现这一点。

const routes = [
  {
    path: '/user/:id',
    component: () => import('@/views/User.vue')
  }
];

在组件中，你可以通过 this.$route.params.id 来访问动态段的值。

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

4. 嵌套路由

Vue Router 支持嵌套路由。你可以通过在路由配置中使用 children 属性来定义嵌套路由。

const routes = [
  {
    path: '/user/:id',
    component: () => import('@/views/User.vue'),
    children: [
      {
        path: 'profile',
        component: () => import('@/views/UserProfile.vue')
      },
      {
        path: 'posts',
        component: () => import('@/views/UserPosts.vue')
      }
    ]
  }
];

在父组件中，你需要使用 <router-view> 来渲染子路由。

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
    <router-view></router-view>
  </div>
</template>

5. 路由守卫

Vue Router 提供了路由守卫功能，允许你在路由导航过程中执行一些操作。常见的路由守卫包括 beforeEach、beforeResolve 和 afterEach。

5.1 全局前置守卫

你可以使用 router.beforeEach 来注册一个全局前置守卫。

router.beforeEach((to, from, next) => {
  if (to.path === '/restricted' && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

5.2 路由独享的守卫

你也可以在路由配置中定义 beforeEnter 守卫。

const routes = [
  {
    path: '/restricted',
    component: () => import('@/views/Restricted.vue'),
    beforeEnter: (to, from, next) => {
      if (!isAuthenticated) {
        next('/login');
      } else {
        next();
      }
    }
  }
];

5.3 组件内的守卫

在组件中，你可以使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 守卫。

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
};

6. 路由元信息

你可以通过在路由配置中添加 meta 属性来定义路由的元信息。

const routes = [
  {
    path: '/restricted',
    component: () => import('@/views/Restricted.vue'),
    meta: { requiresAuth: true }
  }
];

在路由守卫中，你可以访问这些元信息。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

7. 路由懒加载

Vue Router 支持路由懒加载，这可以帮助你优化应用的性能。你可以通过动态导入组件来实现路由懒加载。

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

8. 滚动行为

Vue Router 允许你自定义路由导航时的滚动行为。你可以通过 scrollBehavior 函数来实现这一点。

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  }
});

9. 路由模式

Vue Router 支持两种路由模式：history 模式和 hash 模式。你可以通过 createWebHistory 和 createWebHashHistory 来创建不同的路由模式。

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

const router = createRouter({
  history: createWebHistory(), // history 模式
  // history: createWebHashHistory(), // hash 模式
  routes
});

10. 路由别名

你可以通过 alias 属性来定义路由的别名。

const routes = [
  {
    path: '/home',
    component: () => import('@/views/Home.vue'),
    alias: '/'
  }
];

11. 路由重定向

你可以通过 redirect 属性来定义路由的重定向。

const routes = [
  {
    path: '/old-path',
    redirect: '/new-path'
  }
];

12. 命名路由

你可以通过 name 属性来为路由命名。

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: () => import('@/views/User.vue')
  }
];

在导航时，你可以使用命名路由。

this.$router.push({ name: 'user', params: { id: 123 } });

13. 命名视图

Vue Router 支持命名视图，允许你在同一个路由中渲染多个组件。

const routes = [
  {
    path: '/',
    components: {
      default: () => import('@/views/Home.vue'),
      sidebar: () => import('@/views/Sidebar.vue')
    }
  }
];

在模板中，你可以使用 name 属性来指定视图。

<template>
  <div>
    <router-view></router-view>
    <router-view name="sidebar"></router-view>
  </div>
</template>

14. 路由过渡效果

你可以使用 Vue 的过渡系统来为路由切换添加过渡效果。

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

15. 路由错误处理

你可以通过 router.onError 来捕获路由导航中的错误。

router.onError((error) => {
  console.error('路由错误:', error);
});

16. 路由缓存

你可以使用 <keep-alive> 组件来缓存路由组件。

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>

17. 路由懒加载的预加载

你可以使用 router.addRoute 来动态添加路由，并在需要时预加载路由组件。

router.addRoute({
  path: '/new-route',
  component: () => import('@/views/NewRoute.vue')
});

18. 路由的 TypeScript 支持

Vue Router 4.x 提供了良好的 TypeScript 支持。你可以通过 defineComponent 来定义组件，并使用 RouteRecordRaw 来定义路由配置。

import { defineComponent } from 'vue';
import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: defineComponent({
      template: '<div>Home</div>'
    })
  }
];

19. 路由的单元测试

你可以使用 vue-test-utils 来对路由进行单元测试。

import { mount } from '@vue/test-utils';
import { createRouter, createWebHistory } from 'vue-router';
import App from '@/App.vue';

const routes = [
  {
    path: '/',
    component: { template: '<div>Home</div>' }
  }
];

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

const wrapper = mount(App, {
  global: {
    plugins: [router]
  }
});

expect(wrapper.text()).toContain('Home');

20. 总结

Vue Router 4.x 是一个功能强大且灵活的路由库，它为 Vue 3 提供了全面的路由解决方案。通过本文的介绍，你应该已经掌握了 Vue Router 4.x 的基本用法和高级特性。希望这些知识能够帮助你在实际项目中更好地使用 Vue Router 4.x，构建出更加优秀的单页面应用。