![beach-418742_1280.jpeg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b244e51d8ea4738bcbdfb092726a307~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1280&h=960&s=476905&e=jpg&b=6ca1d7) ## 本章涵盖知识点 - Vue Router 的基本概念 - 路由的配置和使用 - 动态路由和嵌套路由 - 路由守卫 ## 回顾在第四篇文章中，我们详细探讨了 Vue 的计算属性和侦听器，以及生命周期钩子函数。我们了解到计算属性如何基于它们的依赖进行缓存，侦听器如何帮助我们观察和响应 Vue 实例上的数据变化。 ## Vue Router 的基本概念 ### 什么是 Vue Router？ Vue Router 是 Vue 官方的`路由管理器`，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，`实现页面的动态加载和导航`。 ### 为什么需要 Vue Router？在现代 Web 应用中，用户期望页面能够快速响应，无需重新加载整个页面。Vue Router 通过前端路由解决了这个问题，它使得组件的切换变得无缝，`提升了用户体验`。 ## 路由的配置和使用 ### 安装 Vue Router 首先，你需要安装 Vue Router： ```bash npm install vue-router ``` ### 创建路由在 Vue Router 中，路由是通过`router.addRoute`方法配置的： ```javascript // router.js import Vue from "vue"; import Router from "vue-router"; import Home from "@/components/Home"; import About from "@/components/About"; Vue.use(Router); export default new Router({ routes: [ { path: "/", name: "Home", component: Home, }, { path: "/about", name: "About", component: About, }, ], }); ``` ### 在 Vue 实例中使用路由 ```javascript // main.js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; new Vue({ router, render: (h) => h(App), }).$mount("#app"); ``` ### 模板中的路由链接在 Vue 模板中，你可以使用``来创建导航链接： ```html Home About ``` ## 动态路由和嵌套路由 ### 动态路由动态路由是指路由的某些部分是动态的，例如用户 ID 或文章的 slug： ```javascript { path: '/user/:id', name: 'User', component: User } ``` ### 嵌套路由 Vue Router 支持嵌套路由，这使得你可以创建模块化的组件结构： ```javascript { path: '/dashboard', component: Dashboard, children: [ { path: 'posts', component: Posts }, { path: 'users', component: Users } ] } ``` ## 路由守卫 ### 什么是路由守卫？路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。 ### 全局路由守卫 ```javascript router.beforeEach((to, from, next) => { if (to.path === "/login" && isUserAuthenticated()) { next({ path: "/" }); } else { next(); } }); ``` ### 组件内路由守卫 ```javascript export default { beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 }, beforeRouteUpdate(to, from, next) { // 在当前路由改变，但是该组件被复用时调用 }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 }, }; ``` ## 实例演示 ### 创建一个简单的 SPA 我们将创建一个简单的单页面应用，包含首页、关于页和用户个人页。 1. **安装 Vue Router**： ```bash npm install vue-router ``` 2. **配置路由**： ```javascript // router.js import Vue from "vue"; import Router from "vue-router"; import Home from "@/components/Home"; import About from "@/components/About"; import User from "@/components/User"; Vue.use(Router); export default new Router({ mode: "history", routes: [ { path: "/", component: Home }, { path: "/about", component: About }, { path: "/user/:id", component: User }, ], }); ``` 3. **在 Vue 实例中使用路由**： ```javascript // main.js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; new Vue({ router, render: (h) => h(App), }).$mount("#app"); ``` 4. **模板中的路由链接**： ```html ``` ## 结语通过本篇文章，**我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由**。我们还探讨了`路由守卫`的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。 ## 互动交流欢迎在文章下方留言，分享学习 Vue Router 的心得体会，或提出在学习过程中遇到的问题。我们将在后续的文章中提供解答和指导。 --- **注意**：本文内容会根据 Vue.js 和 Vue Router 的最新版本进行更新，确保提供的信息是最新的。同时，为了提高文章的可读性，我们使用了清晰的代码块和图表。希望本文能够帮助你深入理解 Vue 的路由管理，并为你的 Vue 学习之旅添砖加瓦。