Vue Router
在现代Web应用中，路由是必不可少的。Vue Router是Vue.js的官方路由管理器，它让我们可以构建单页应用（SPA），实现页面之间的导航而不需要刷新整个页面。
Vue Router提供了声明式的路由配置、嵌套路由、路由参数、路由守卫等功能。现在让我们来学习Vue Router的用法，了解如何配置路由、实现导航、处理路由参数，以及如何使用路由守卫。
什么是Vue Router
Vue Router是Vue.js的官方路由管理器。它让我们可以：
- 定义路由规则，将URL映射到组件
- 实现页面之间的导航，不需要刷新整个页面
- 处理路由参数和查询字符串
- 实现嵌套路由
- 使用路由守卫控制访问权限
让我们先看一个简单的例子，理解Vue Router的基本用法。由于Vue Router需要通过npm安装，在CDN环境下使用比较复杂，我们这里主要介绍概念和用法，实际项目中使用Vite等构建工具会更方便。
安装Vue Router
在使用Vue Router之前，我们需要先安装它。如果使用Vite等构建工具，可以通过npm安装：
|npm install vue-router@4
如果使用CDN，可以引入Vue Router的CDN链接：
|<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
基本路由配置
下面是如何进行基本的路由信息配置：
|<div id="app"> <router-view></router-view> </div> <script> const { createApp } = Vue; const { createRouter, createWebHistory } = VueRouter; // 定义路由组件 const Home = { template: '<div><h1>首页</h1><p>欢迎来到首页</p></div>' }; const About = { template: '<div><h1>关于</h1><p>这是关于页面</p></div>' }; // 定义路由规则 const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; // 创建路由实例 const router = createRouter({ history: createWebHistory(), routes }); // 创建应用实例并挂载路由 const app = createApp({}); app.use(router); app.mount('#app'); </script>
在这个例子中，我们定义了两个路由：/对应Home组件，/about对应About组件。<router-view>是路由出口，用于显示当前路由对应的组件。
路由导航
Vue Router提供了两种方式进行路由导航：声明式导航和编程式导航。
声明式导航
在Vue Router中，声明式导航是通过<router-link>组件来实现的。<router-link>用于生成带有路由跳转功能的链接。当用户点击这些链接时，页面会自动根据设置的路由切换到对应的组件页面，而不会重新加载整个页面。你可以为<router-link>的to属性指定跳转的路径，还可以通过设置active-class修改激活时的样式类。例如：
|<div id="app"> <nav> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> </nav> <router-view></router-view> </div> <script> const {
<router-link>会渲染成<a>标签，点击时会导航到指定的路由。当前激活的路由会自动添加router-link-active类。
编程式导航
编程式导航是通过在代码中调用路由实例的方法（如router.push()、router.replace()等）来实现路由跳转的。这种方式常用于需要在事件处理函数、条件判断或异步操作后进行路由跳转的场景。例如，当用户完成表单提交或需要在逻辑判断后自动跳转页面时，就可以使用编程式导航。
常用的方式有：
router.push(location): 导航到新的路由，类似于点击<router-link>。参数可以是路径字符串（如'/about'），也可以是一个包含路径和参数的对象。router.replace(location): 与push类似，但不会在历史记录中留下新条目，常用于替换当前页面。router.go(n): 在浏览历史中向前或向后跳转n步。
例如：
|// 跳转到首页 router.push('/'); // 跳转到关于页面 router.push({ path: '/about' }); // 用replace方式跳转，不产生新历史记录 router.replace('/about');
这种编程式方式适合在方法、回调、事件处理等需要主动进行页面跳转的地方使用。
|<div id="app"> <nav> <button @click="goToHome">首页</button> <button @click="goToAbout">关于</button> </nav> <router-view></router-view> </div> <script> const {
在Vue 3的组合式API（Composition API）中，如果我们想要在setup()函数里访问和操作路由实例，可以使用useRouter函数。它可以让我们获取当前应用的router实例，从而进行编程式导航（如跳转页面）、访问路由信息等。
比如，如果你希望在点击按钮时跳转到首页，可以这样做：
|import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); // 获取路由实例 const goToHome = () => { router.push('/'); // 跳转到首页 }; return { goToHome, }; } }
同理，如果还需要跳转到其它页面，只需调用router.push()方法并传入对应的路径即可。useRouter只能在setup()或<script setup>等组合式API相关的地方使用，不能在组件外部或普通函数里直接调用。
|<script> const { createApp } = Vue; const { createRouter, createWebHistory, useRouter } = VueRouter; const app = createApp({ setup() { const router = useRouter(); const goToHome = () => { router.
路由参数
我们可以通过路由参数传递数据。有两种方式：路径参数和查询参数。
路径参数
路径参数（params）是URL路径中的动态部分，用于在路由中传递变量。你可以在路由地址中声明路径参数，通常以冒号（:）开头。例如，路径 /user/:id 中的 :id 就是一个路径参数。这样，访问 /user/123 时，id 会自动解析为 '123'，并可以在组件中通过 route.params.id 获取对应的参数值。
|<div id="app"> <router-view></router-view> </div> <script> const { createApp } = Vue; const { createRouter, createWebHistory, useRoute } = VueRouter; const User = { setup() {
在这个例子中，:id是路径参数。当我们访问/user/123时，route.params.id的值就是'123'。
查询参数
查询参数（query parameters）是指URL中以问号（?）开始、使用键值对（key=value）形式表示的数据，并可通过&连接多个参数。例如，在URL /search?keyword=Vue&page=1 中，keyword=Vue 和 page=1 就是查询参数。
查询参数通常用于向页面传递过滤、分页等信息，可以在Vue路由中通过 route.query 对象来访问这些参数。例如：
|<div id="app"> <router-view></router-view> </div> <script> const { createApp } = Vue; const { createRouter, createWebHistory, useRoute } = VueRouter; const Search = { setup() {
当我们访问/search?keyword=Vue&page=1时，route.query.keyword的值是'Vue'，route.query.page的值是'1'。
嵌套路由
嵌套路由是指在父路由组件内部再定义子路由，让不同的子路由渲染到父组件中的 <router-view> 里。这样可以让多个路由层级在页面结构上呈现嵌套关系。
使用嵌套路由时，父组件通常会包含一个 <router-view>，用于展示其子路由对应的组件。例如 /user 是一个父路由，它可以有个人资料（/user/profile）和文章列表（/user/posts）等子路由。这样，不同的子页面会在父用户页内切换显示。
|<div id="app"> <router-view></router-view> </div> <script> const { createApp } = Vue; const { createRouter, createWebHistory } = VueRouter; const User = { template: ` <div>
在这个例子中，User组件内部有子路由。子路由的路径是相对于父路由的，所以profile的完整路径是/user/profile。
路由守卫
路由守卫用于在路由导航过程中执行一些操作，比如权限检查、数据加载等。
全局前置守卫
beforeEach是 Vue Router 的全局前置守卫（Global Before Guard），它会在每一次路由跳转前被调用。你可以在这里执行一些逻辑，例如：检查用户是否已经登录、动态修改页面标题、权限校验、数据预加载等。beforeEach 接收三个参数：
to：即将要进入的目标路由对象。from：当前导航正要离开的路由对象。next：必须调用该方法来 resolve 这个钩子。可以通过next()放行，next('/login')重定向，或next(false)取消导航。
全局前置守卫的应用非常广泛。例如，常用来做身份验证——只有登录用户才可以访问某些路由，未登录用户将被重定向到登录页。
示例说明：
|router.beforeEach((to, from, next) => { // to: 目标路由对象 // from: 当前路由对象 // next: 控制是否通过导航或重定向 const isAuthenticated = checkAuth(); // 假设这是检查是否登录的函数 if (to.path === '/admin' && !isAuthenticated) { // 如果要进入 admin 页面且未登录，跳转到登录页 next('/login'); } else { // 其他情况直接放行 next();
这样能够保证所有需要登录的页面都先经过统一的身份校验。
|<script> const router = createRouter({ history: createWebHistory(), routes }); router.beforeEach((to, from, next) => { // to: 目标路由 // from: 当前路由 // next: 控制导航的函数 // 检查是否需要登录 const isAuthenticated = checkAuth(); // 假设这是一个检查登录的函数
组件内守卫
除了在全局注册路由钩子以外，我们还可以直接在单个组件内部定义路由守卫。Vue 提供了三种组件内守卫钩子函数，分别用于在不同的路由导航流程中执行自定义逻辑：
beforeRouteEnter(to, from, next)：在路由进入前调用，此时组件实例还未被创建，无法访问this，可以在导航确认前进行异步数据获取或权限检测。beforeRouteUpdate(to, from, next)：当当前路由改变，但该组件被复用时调用，可以访问this，适合根据路由参数的变化更新组件数据。beforeRouteLeave(to, from, next)：导航离开当前组件对应的路由时调用，可用于导航离开前的确认或收尾工作，例如弹窗提示未保存更改。
|<script> const UserProfile = { beforeRouteEnter(to, from, next) { // 在进入路由之前执行 // 此时组件实例还未创建，无法访问this loadUserData(to.params.id).then(() => { next(); }); }, beforeRouteUpdate(to, from, next) { // 在当前路由改变，但组件被复用时执行 // 可以访问this this
路由元信息
在 Vue 路由配置中，我们可以通过在每个路由对象中添加 meta 字段，为该路由设置自定义的元信息。这些元信息可以用于存储任何辅助数据，比如权限控制、页面标题、面包屑、动画标识等。
meta 字段是一个普通对象，其内容不会影响路由功能，但可以在路由守卫或组件中根据需要读取和使用。例如，可以根据 meta.requiresAuth 判断是否需要登录权限后再进入页面，或者根据 meta.title 动态设置页面标题。
|<script> const routes = [ { path: '/admin', component: Admin, meta: { requiresAuth: true, title: '管理后台' } } ]; router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated
综合示例
下面我们通过一个更加详细的综合示例，来帮助大家理解和实践前面学到的 Vue Router 相关知识。在这个示例中，我们将搭建一个简单的博客应用，涵盖以下内容：
- 设置多级路由，包括首页、文章列表、单篇文章详情和关于页。
- 演示如何在路由对象中配置 meta 字段，实现如登录校验、动态标题等功能。
- 通过导航守卫（如
beforeEach）拦截路由，实现简单的权限控制。 - 使用
<router-link>实现页面间导航，并通过<router-view>渲染对应组件。 - 利用路由参数获取并展示动态内容，比如访问不同文章的详情页。
通过这个例子，大家可以全面体会到 Vue Router 的基础用法及实际开发中的典型场景。
|<div id="app"> <nav> <router-link to="/">首页</router-link> <router-link to="/posts">文章列表</router-link> <router-link to="/about">关于</router-link> </nav> <router-view></router-view>
在实际项目中，Vue Router通常与Vite等构建工具一起使用。使用构建工具可以更好地组织代码，支持单文件组件（.vue文件），提供更好的开发体验。
下一步
在这一节课中，我们学习了Vue Router的基本用法。我们了解了如何配置路由、实现导航、处理路由参数，以及如何使用路由守卫。 Vue Router是构建单页应用的重要工具。掌握它后，你就能构建出功能完整的单页应用。
在下一堂课，我们将学习Pinia，了解如何在Vue应用中进行状态管理。这将帮助我们更好的管理应用中的全局状态。