从零开始学习vueRouter4：基础教程

本文详细介绍了如何从零开始使用Vue Router 4进行路由配置，涵盖了路由定义、安装、基本配置、动态路由参数、查询参数、路由守卫及懒加载等核心功能，帮助你构建复杂的单页面应用程序。通过本文的学习，你将掌握Vue Router 4的主要特性和用法。

1. 引入与安装 Vue Router 4

1.1 Vue Router 4 及其功能

Vue Router 是 Vue.js 官方的路由管理库，它允许你在 Vue.js 应用中实现单页面应用程序（SPA）的导航。Vue Router 4 是它的最新版本，它不仅支持基于路由的导航，还提供了丰富的功能，包括路由参数、路由守卫、路由懒加载、路由嵌套等。

Vue Router 的主要功能包括：

• 路由定义：通过定义路由规则，可以导航到不同的视图。
• 动态路由：支持动态路由，可以根据不同的参数匹配不同的路由。
• 嵌套路由：可以构建复杂的嵌套路由结构。
• 路由守卫：提供了导航守卫，可以在导航发生之前、之后进行一些操作。
• 路由元信息：允许你为每个路由定义额外的信息。

1.2 安装 Vue Router 4

要使用 Vue Router 4，首先需要安装它。你可以在你的 Vue.js 项目中使用 npm 或 yarn 安装 Vue Router 4。

npm install vue-router@next

或者使用 yarn：

yarn add vue-router@next

安装完成后，你可以导入 Vue Router 并将其添加到你的 Vue.js 应用程序中。

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

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

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

export default router;

2. 基本路由配置

2.1 创建路由对象

首先，你需要定义路由对象。路由对象包括若干个路由规则，每个规则对应一个路径和组件。

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

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

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

export default router;

在这里，我们定义了两个路由规则：

• path: '/' 对应 Home 组件。
• path: '/about' 对应 About 组件。

2.2 定义路由规则

你可以在路由规则中使用各种属性来定义路由行为。

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

这里，除了 path 和 component 属性，我们还添加了 name 属性，用于命名路由。命名路由可以在导航时更方便地引用。

2.3 路由嵌套

Vue Router 支持复杂的嵌套路由结构。嵌套路由允许你定义一组嵌套在父路由下的子路由。

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      { path: '', component: ChildA },
      { path: 'child-b', component: ChildB },
    ],
  },
];

在这个例子中，/parent 路由下有两个子路由，ChildA 和 ChildB。ChildA 是默认子路由，当访问 /parent 时会显示 ChildA 组件。访问 /parent/child-b 时会显示 ChildB 组件。

3. 路由参数与查询参数

3.1 使用路由参数

路由参数可以让你在不同的 URL 中传递数据。你可以通过定义动态路由来捕获这些参数。

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

在这个例子中，/user/:id 是一个动态路由，其中 :id 是一个参数。当你访问 /user/123 时，id 的值为 123。

你可以在组件中通过 params 属性访问这些参数：

// 在 User.vue 组件中
export default {
  props: ['id'],
  created() {
    console.log(this.id); // 输出 123
  },
};

3.2 使用查询参数

查询参数用于在 URL 中传递额外的数据，它们通常出现在 URL 的末尾，以问号 ? 开头。

const routes = [
  { path: '/profile', component: Profile },
];

你可以在组件中通过 query 属性访问这些查询参数：

// 在 Profile.vue 组件中
export default {
  props: ['query'],
  created() {
    console.log(this.query); // 输出 { page: '1', sort: 'desc' }
  },
};

4. 路由导航与守卫

4.1 基本导航方法

Vue Router 提供了多种导航方法，允许你从一个路由导航到另一个路由。

// 导航到 '/about'
router.push('/about');

// 导航到 '/user/123'
router.push({ path: '/user/:id', params: { id: 123 } });

你可以使用 router.push 方法导航到不同的路由。你还可以使用 router.replace 方法导航到不同的路由，但不会在浏览器历史中创建新的历史记录条目。

4.2 路由守卫的应用

路由守卫允许你在导航发生之前或之后进行一些操作。Vue Router 提供了多种类型的守卫，包括全局守卫、导航守卫和组件内守卫。

router.beforeEach((to, from, next) => {
  console.log('进入：', to.path);
  console.log('离开：', from.path);
  next();
});

在上面的例子中，router.beforeEach 是一个全局守卫，它会在每次导航发生之前调用。你可以在这里执行一些逻辑，例如检查用户是否已登录。

5. 路由元信息与命名路由

5.1 使用路由元信息

路由元信息允许你在路由配置中添加额外的信息。这些信息可以在路由导航时使用。

const routes = [
  {
    path: '/profile',
    component: Profile,
    meta: {
      requiresAuth: true,
    },
  },
];

在上面的例子中，我们为 profile 路由添加了一个元信息对象，其中包含 requiresAuth: true。你可以在导航守卫中使用这些元信息来执行特定的操作。

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

5.2 命名路由及其应用

命名路由允许你为每个路由分配一个名称，这样在导航时可以使用名称而不是路径。

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

在导航时，你可以使用路由名称来导航：

router.push({ name: 'about' });

使用路由名称可以使代码更清晰，并且在路径发生变化时更方便维护。

6. 路由与组件的高级配置

6.1 嵌套路由

嵌套路由允许你定义一组嵌套在父路由下的子路由。子路由可以共享相同的布局组件，并且可以在不同的子路由之间切换。

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      { path: '', component: ChildA },
      { path: 'child-b', component: ChildB },
    ],
  },
];

在这个例子中，Parent 组件是父路由组件，它包含两个子路由组件 ChildA 和 ChildB。访问 /parent 时会显示 ChildA，访问 /parent/child-b 时会显示 ChildB。

6.2 路由懒加载

路由懒加载允许你按需加载路由组件，从而减少初始加载时间。你可以通过 import() 函数实现懒加载。

const routes = [
  { path: '/lazy', component: () => import('./components/LazyComponent.vue') },
];

在上面的例子中，LazyComponent 组件会在需要时按需加载。这样可以提高应用的初始加载速度，因为不需要一开始就加载所有组件。

总结

Vue Router 4 是一个强大的路由管理库，它提供了丰富的功能来帮助你构建复杂的单页面应用程序。通过本文的学习，你已经掌握了 Vue Router 4 的基本用法，包括路由配置、导航守卫、路由懒加载等。希望这些内容能帮助你在实际项目中更好地使用 Vue Router 4。