当前位置：首页 > article >正文

Vue 3 30天精进之旅：Day 10 - Vue Router

article 2025/2/1 23:43:49

在现代单页面应用（SPA）中，路由管理是必不可少的一部分。Vue Router是Vue.js官方的路由管理库，它使得在Vue应用中实现路由变得简单而灵活。今天的学习将围绕以下几个方面展开：

Vue Router概述
安装和基本配置
定义路由
路由视图和路由链接
嵌套路由
路由传参
页面导航和路由守卫
总结与实践

1. Vue Router概述

Vue Router是Vue.js的路由管理器，负责处理应用中的不同视图组件之间的导航。它可以用来实现各种功能，例如嵌套路由、传递参数、路由守卫等。使用Vue Router，你可以构建一个用户体验更加流畅的单页面应用，使得用户在不同视图之间切换时不会出现页面重新加载的情况。

2. 安装和基本配置

2.1. 安装Vue Router

要在Vue项目中使用Vue Router，你需要首先安装它。通过npm命令安装：

npm install vue-router@4

2.2. 引入和使用Vue Router

在项目的入口文件（通常是 main.js）中引入和配置Vue Router。

javascript

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';

// 导入组件
import Home from './views/Home.vue';
import About from './views/About.vue';

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

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 创建并挂载应用
const app = createApp(App);
app.use(router);
app.mount('#app');

在上述代码中，我们导入了需要用于路由的组件，并定义了一个简单的路由配置。然后，使用 createRouter 创建一个路由实例，并将其传递给 Vue 应用。

3. 定义路由

在 Vue Router 中，路由通过一个对象数组来定义，每个对象通常包含如下几个重要属性：

path: 路由的路径。
component: 路由对应的组件。
name: 路由的名称（可选）。

下面是一个简单的示例，定义了几个不同的路由：

javascript

const routes = [
  { path: '/', component: Home, name: 'home' },
  { path: '/about', component: About, name: 'about' },
  { path: '/:id', component: UserProfile, name: 'user-profile' }, // 动态路由
];

4. 路由视图和路由链接

在根组件中使用 <router-view> 组件来呈现与当前路由匹配的组件：

vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view> <!-- 路由视图 -->
  </div>
</template>

<router-link> ：这是用于导航的组件，生成一个链接，可以替代传统的 <a> 标签，具有 SPA 应用特性。

5. 嵌套路由

嵌套路由可以让你在相同的页面上展示多个视图，为复杂的布局提供支持。下面是一个设置嵌套路由的示例：

javascript

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile,
      },
      {
        path: 'settings',
        component: UserSettings,
      }
    ]
  }
];

在这个示例中，/user/profile 和 /user/settings 都是用户路由的子路由。你需要在 User 组件中使用 <router-view> 来呈现子路由内容。

6. 路由传参

Vue Router 允许你在路由中传递参数，最常见的是动态参数。例如，在用户档案页面中传递用户ID：

javascript

const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    name: 'user-profile',
  }
];

在 UserProfile 组件中，你可以使用 $route.params 来访问参数：

vue

<script>
export default {
  setup() {
    const route = useRoute(); // 导入 useRoute 获取路由对象

    return {
      userId: route.params.id,
    };
  },
};
</script>

7. 页面导航和路由守卫

7.1. 程序化导航

除了使用 <router-link>，你还可以通过编程方式进行导航。例如：

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

7.2. 路由守卫

路由守卫用于在导航发生前控制访问，通常用于权限验证。Vue Router 提供了多种类型的守卫：全局守卫、路由独享守卫和组件内守卫。

javascript

// 全局守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = // 逻辑判断用户是否已认证；
  if (to.name !== 'login' && !isAuthenticated) {
    next({ name: 'login' });
  } else {
    next(); // 允许路由继续
  }
});