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

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

1. Vue Router概述
2. 安装和基本配置
3. 定义路由
4. 路由视图和路由链接
5. 嵌套路由
6. 路由传参
7. 页面导航和路由守卫
8. 总结与实践

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(); // 允许路由继续}
});

8. 总结与实践

在今天的学习中，我们深入了解了Vue Router的基础知识和使用方法。通过安装和配置Vue Router，我们创建了基本的路由和导航，并掌握了嵌套路由、参数传递及路由守卫的概念。这些技能将为你构建动态、复杂的单页面应用提供强大支持。

练习

1. 基于你之前的Todo应用，添加几个页面，例如待办事项列表和完成状态的详细信息页面，使用Vue Router管理这些路由。
2. 实现动态路由，通过URL参数显示不同的待办事项内容。
3. 使用路由守卫保护某些路由，确保在适当的条件下用户才能访问。

通过今天的学习，相信你对Vue Router有了更清晰的认识。在接下来的日子里，我们将探索更高级的主题，包括状态管理、异步操作等。继续保持学习热情，明天见！