VueRouter4 入门教程：轻松掌握Vue路由管理

VueRouter4 是 Vue.js 官方推荐的路由管理器，提供了丰富的功能来管理应用中的页面跳转、组件切换和参数传递等问题。本文详细介绍了 VueRouter4 的安装、配置、路由定义及使用、参数传递、守卫机制等内容，帮助开发者快速掌握并应用 VueRouter4。

VueRouter4 是 Vue.js 官方推荐的路由管理器，专门用于实现 Vue.js 项目的前端路由功能。VueRouter4 提供了丰富的功能来帮助开发者轻松地管理应用中的页面跳转、组件切换和参数传递等问题。VueRouter4 与 Vue3 完全兼容，确保开发者可以无缝地使用最新的 Vue.js 版本。

VueRouter4的基本概念

• Router：路由实例，用于管理路由规则、切换组件和导航逻辑。
• Route：路由对象，包含了匹配到的路径、参数、查询字符串等信息。
• Navigation：导航，是路由系统的核心概念，表示从一个路由跳转到另一个路由的过程。
• Component：组件，Vue.js 中的小型独立模块，可以在路由规则中进行注册和使用。

• 页面导航：实现从一个页面跳转到另一个页面，这是路由最核心的功能。
• 组件切换：根据路径匹配不同的组件，渲染不同的内容。
• 参数传递：支持动态参数和查询参数，方便传递和获取数据。
• 导航保护：通过守卫机制，实现权限控制和页面保护。
• 编程式导航：支持通过代码进行页面跳转，而不仅仅依赖于 HTML 标签。
• 优化与缓存：支持组件缓存，提高应用加载速度和用户体验。

安装和配置 VueRouter4 是使用路由功能的前提。

通过npm安装VueRouter4

首先，确保你的项目已经安装了 Vue3，如果还没有，请通过以下命令安装 Vue3：

npm install vue@next

然后，通过 npm 安装 VueRouter4：

npm install vue-router@next

引入VueRouter4并进行基本配置

在应用程序中引入并配置 VueRouter4，首先需要定义路由规则，然后创建路由实例并注册为 Vue 应用的插件。

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;

这里使用了 createWebHistory 方法来创建基于 HTML5 History 模式的路由实例，这是一种更现代且更友好的 URL 形式。

创建路由实例和路由模式设置

上面代码中的 history 是路由实例的配置参数之一，它决定了应用的路由模式。VueRouter4 支持 createWebHistory 和 createWebHashHistory 两种模式。createWebHistory 使用 HTML5 History API，createWebHashHistory 使用 hash 值（以 # 开头），当使用 createWebHashHistory 时，URL 会以 # 作为前缀，这种模式更兼容老版本浏览器。

// 基于hash的路由模式
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

路由定义是指在 VueRouter4 中定义不同的路径和对应的组件，通过路由实例来管理这些定义。VueRouter4 提供了 <router-link> 和 <router-view> 两个标签来实现页面跳转和组件显示。

定义路由路径和组件映射

定义路由路径和组件映射是路由的基础。在上面的安装与配置部分已经定义了两个路由规则：

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

这表示当路径为 / 时，渲染 Home 组件，路径为 /about 时，渲染 About 组件。

使用 <router-link> 和 <router-view> 标签

<router-link> 标签用于创建链接，点击链接将触发路由跳转。<router-view> 标签表示路由渲染的位置，VueRouter4 将根据当前路径匹配的路由规则来决定渲染哪个组件。

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

导航和跳转的基本用法

除了 <router-link>，还可以使用 router.push 或 router.replace 方法来实现编程式导航。

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function navigateToHome() {
      router.push('/');
    }

    function navigateToAbout() {
      router.replace('/about');
    }

    return {
      navigateToHome,
      navigateToAbout,
    };
  },
};

动态路由参数可以传递数据，而查询参数用于传递临时数据，两者都可以通过 params 和 query 属性获取。

使用动态参数传递数据

动态参数是通过在路径中使用 : 来表示的，例如：

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

在组件中，可以通过 route.params 来获取动态参数：

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    console.log(route.params.id);

    return {
      userId: route.params.id,
    };
  },
};

利用 query 参数传递临时数据

query 参数是通过 ?key=value 的形式传递的，可以通过 router.push 方法添加或修改 query 参数：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function addQuery() {
      router.push({ path: '/user', query: { page: 2 } });
    }

    return {
      addQuery,
    };
  },
};
``

在组件中，可以通过 `route.query` 来获取 query 参数：

```javascript
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    console.log(route.query.page);

    return {
      currentPage: route.query.page,
    };
  },
};

路由守卫是 VueRouter4 提供的一种机制，用于在导航行为发生前或发生后执行一些逻辑操作，可以实现权限控制、数据验证等。

前置、后置和全局守卫的使用

• 前置守卫（beforeEach、beforeEnter）：在导航即将发生时执行。
• 后置守卫（afterEach）：在导航完成后执行。
• 全局守卫（beforeEach、afterEach）：适用于所有导航。

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      // 验证用户是否具有管理权限
      if (to.meta.requiresAdmin) {
        const isAuthorized = checkAdminAuthorization();
        if (isAuthorized) {
          next();
        } else {
          next('/unauthorized');
        }
      } else {
        next();
      }
    },
  },
];

router.beforeEach((to, from, next) => {
  // 全局前置守卫
  if (to.meta.requiresAuth) {
    const isAuthorized = checkAuthorization();
    if (isAuthorized) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

router.afterEach((to, from) => {
  // 全局后置守卫
  console.log(`Navigated from ${from.path} to ${to.path}`);
});

保护特定路由以实现权限控制

通过在路由规则中定义元信息（meta），可以在守卫中实现更复杂的权限控制。

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAdmin: true },
  },
];

在守卫中，可以通过 to.meta 来检查元信息：

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAdmin: true },
    beforeEnter: (to, from, next) => {
      if (to.meta.requiresAdmin) {
        const isAuthorized = checkAdminAuthorization();
        if (isAuthorized) {
          next();
        } else {
          next('/unauthorized');
        }
      } else {
        next();
      }
    },
  },
];

路由元信息是一种自定义属性，可以在路由规则中定义，并在路由守卫或其他地方使用。自定义守卫可以帮助实现更复杂的导航逻辑。

使用路由元信息增加自定义属性

路由元信息可以通过 meta 属性来定义，它是一个对象，可以包含任意自定义属性：

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true, requiresAdmin: false },
  },
];

在守卫中，可以通过 to.meta 来获取和使用这些自定义属性：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const isAuthorized = checkAuthorization();
    if (isAuthorized) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

实现更复杂的导航逻辑与守卫规则

通过自定义守卫和路由元信息，可以实现更复杂的导航逻辑，例如，根据不同的用户角色显示不同的页面：

router.beforeEach((to, from, next) => {
  const userRole = getUserRole();
  if (to.meta.requiresAdmin && userRole !== 'admin') {
    next('/unauthorized');
  } else if (to.meta.requiresEditor && userRole !== 'editor') {
    next('/unauthorized');
  } else {
    next();
  }
});

通过这种方式，可以灵活地控制不同用户的访问权限，提高应用的安全性和用户体验。

VueRouter4 是一个强大而灵活的路由管理器，通过它，开发者可以轻松地管理 Vue.js 应用中的页面导航、组件切换和参数传递等功能。本文详细介绍了 VueRouter4 的安装、配置、路由定义及使用、参数传递、守卫机制等核心内容，帮助读者快速掌握并应用 VueRouter4。