Vue.js前端框架项目实战（微课版） 课件 5.1 路由

5.1路由前端框架技术与应用FrontendFrameworks应用架构优化随着Vue.js应用程序的功能越来越复杂，代码库的规模逐渐扩大，需要对应用进行有效地架构和优化。在运用Vite创建Vue3应用的基础上，本章将深入探讨应用在组件化开发的过程中，如何设计路由管理、组件架构和状态管理，以确保开发效率和应用的可维护性。前言路由的基本概念可以类比为网络中的“路由器”，其中每个接口（键）对应一台计算机（值），形成一对一的关系。在开发中，多个路由（route）由“路由器”（router）统一管理。路由最初源自服务器端，服务器根据请求的URL定位到相应的处理函数，返回渲染好的页面。然而，这种方法存在服务器负担重、页面渲染速度受网络影响、用户体验不佳等缺点。为解决这些问题，前端路由应运而生，将页面内容更新的职责转移到前端，不再依赖服务器返回完整页面。随着单页面应用的流行，前后端分离成为趋势，前端路由成为页面切换的主要手段。在单页面应用中，路由切换不会导致页面刷新，而是通过虚拟DOM动态更新内容，实现无刷新切换，提升页面响应速度。前言在此基础上，Vue.js推出了自己的路由解决方案——VueRouter。VueRouter是Vue.js官方的路由插件，专为构建单页面应用而设计，与Vue.js深度集成。在Vue.js的单页面应用中，路由用于定义访问路径，并将路径与组件关联，路由负责页面跳转和内容切换，组件负责展示页面内容。通过VueRouter，开发者可以轻松管理Web应用的链接路径，确保页面切换流畅无缝。前言1静态路由2动态路由3路由传参4嵌套路由目录|CONTENT5编程式路由6重定向7导航守卫1静态路由静态路由是一种预定义的路由机制，也是路由最基本的用法，其中路由项是通过手动配置而非动态生成的，需要我们手动指定每个跳转路径，如果缺少某个路由，就需要在路由配置中手动添加相应的规则。静态路由的概念1静态路由（1）安装路由打开在上一章节中用Vite脚手架创建的Vue项目myproject，在终端中输入以下命令来安装VueRouter：npminstallvue-router安装完成后，打开package.josn和package-lock.json文件，查看dependencies中有没有vue-router，有的话，则说明安装成功了，并且可以查看所安装的vue-router的版本号。静态路由的实现1静态路由（2）配置路由在src目录下新建router目录，在该目录下新建index.js文件，用来配置路由。典型的路由配置文件如下：静态路由的实现1静态路由（2）配置路由此外，我们到src/views/目录下新建Home.vue和About.vue两个文件，并写相应代码。Home.vue代码如下：About.vue代码如下：静态路由的实现1静态路由（3）在应用中注册路由下一步是在main.js文件中将路由集成到Vue应用中。通过use方法将VueRouter注册到应用实例中：静态路由的实现1静态路由（4）使用路由视图和导航在App.vue中，通过使用路由视图<router-view>来渲染当前激活的路由组件。通过<router-link>实现页面导航。静态路由的实现1静态路由静态路由的实现效果完成以上操作，现在运行项目，页面效果如下图所示，默认打开的是首页，点击“关于我们”，可跳转关于我们页面，再点击“首页”，则跳转首页：静态路由的实现1静态路由静态路由配置的注意点需要说明的一点是，在第二步配置路由时，VueRouter在初始化时默认使用hash模式，这种模式下的URL包含一个#符号，后面跟随路由路径，例如http://localhost:8080/#/home。这种URL形式虽然能够工作，但视觉上不够美观，且不符合用户对传统网址的浏览习惯。为了提升用户体验并使URL更加友好，我们在这里配置了history模式。这种模式通过HTML5的history.pushStateAPI实现URL跳转，而无需重新加载页面，从而使URL看起来更自然，例如http://localhost:5173/home。使用history模式的主要优势包括：（1）更自然的URL：URL路径不再包含#，更符合用户的浏览习惯。（2）更好的SEO：清洁的URL结构有助于搜索引擎优化。（3）无需重新加载：使用history.pushState实现页面导航，无需重新加载页面，提供流畅的用户体验。静态路由的实现2动态路由动态路由与静态路由不同，它指的是路由器能够基于相互之间交换的特定路由信息自动构建和维护路由表，并且能够随着网络链路和节点的变化自动进行调整。在需要添加新的路由时，只需更新路由信息库中的数据，路由器便能自动识别并配置相应的路由信息。此外，动态路由允许我们通过路由参数在URL中包含可变内容，例如用户ID或文章ID，根据这些具体的参数来动态地加载内容，从而实现用户详情页、文章详情页等功能，为用户提供更加个性化的访问体验。实现动态路由，我们需要在上一小节静态路由配置的基础上，再进行以下操作：动态路由的概念2动态路由（1）添加路由信息在src目录下新建utils目录，在该目录下新建nav.js文件，用于存放动态路由信息，写入以下代码：动态路由的实现（2）动态添加路由配置在src目录下新建utils目录，在该目录下新建nav.js文件，用于存放动态路由信息，写入以下代码：2动态路由（3）使用动态路由在src/utils/nav.js文件中保存路由的相关信息，在组件中引用nav.js中的数据更为方便，减少撰写的代码量。在主组件src/App.vue中，添加如下代码：动态路由的实现2动态路由（4）动态添加路由在路由实例创建之后，VueRouter还允许动态地添加路由，可以使用addRoute方法来实现。例如，在src/router/index.js文件中，添加以下代码：动态路由的实现再到主组件src/App.vue中的<el-menu>标签中，添加以下代码：另外，我们还需创建目标组件src/views/User.vue，写入以下代码：3路由传参在VueRouter中，路由传参是一种将数据从父组件传递到子组件的技术，这些数据通常是URL中的一部分。这种动态路径参数传递数据的方式，特别适用于需要根据不同参数加载不同内容的场景，比如显示不同用户的信息。例如，对于每个具有不同ID的用户，我们可以使用动态路径参数:id来渲染User组件。路由传参的概念传参3路由传参（1）定义动态路由规则在VueRouter的配置中，定义一个动态路径参数:id。这个参数使得URL能够匹配任何形式为/user/:id的路径：其中:id是一个变量部分，可以是任何值（如/user/1、/user/2等），VueRouter会捕获URL中/user/后面的部分，并将其作为参数传递给User组件。路由传参的实现3路由传参（2）在组件中获取参数在src/views/User.vue组件中，使用useRoute钩子函数来获取当前的路由对象。这个对象包含了当前路由的所有信息，包括路径参数：路由传参的实现通过route.params.id，可以访问到URL中的:id参数。在这个例子中，如果URL是/user/1，那么userId将会是1。我们通过在模板中显示参数来验证获取到的参数值，在src/views/User.vue组件的模板中，使用双花括号{{userId}}来显示userId的值。3路由传参（3）创建路由链接在App.vue文件中，使用<router-link>来创建一个指向/user/1的链接，这个链接将会传递1作为id参数。当用户点击这个链接时，VueRouter将会导航到/user/1，并渲染User组件，同时将1作为id参数传递给组件。路由传参的实现通过这种方式，VueRouter允许我们在组件之间通过URL传递参数，而不需要使用props或其他复杂的状态管理技术。这使得数据的传递更加直观和灵活，特别是在构建单页面应用时非常有用。3路由传参（4）设置多个路由参数除了单一的路径参数，VueRouter也支持在同一个路由中设置多个动态路径参数。这使得我们可以传递多个数据到组件中，并且它们的值都会被添加到路由的params对象中。例如：通过以上步骤，我们可以灵活地在Vue应用中动态添加路由并传递参数，从而实现更复杂的页面逻辑和用户体验。路由传参的实现路由规则路径举例route.params/user/:id/user/1{id:'1'}/user/:id/article_id/user/1/123{id:'1';article_id:'123'}4嵌套路由VueRouter提供了强大的嵌套路由功能，允许开发者在一个组件内部嵌套另一个或多个子路由视图。这种机制通过在父路由的组件中进一步划分子路由，清晰地表达了组件之间的层级关系，同时使得路由管理更加灵活和模块化。此外，嵌套路由不仅优化了URL的结构，使其更加直观，还帮助开发者更高效地组织和管理复杂的页面布局。嵌套路由的概念4嵌套路由（1）定义父子路由在路由配置文件src/router/index.js中，定义父路由和子路由。子路由被定义在父路由的children数组中，可以为一个父路由定义多个子路由。嵌套路由的实现4嵌套路由（2）添加父组件的导航链接在src/App.vue文件中添加父组件的入口，可以在<el-menu>标签中，添加<router-link>导航链接，用于跳转父路由：（3）添加子组件的路由视图和导航链接在父组件src/components/Parent.vue中包含了一个<router-view>标签，这是嵌套路由的关键部分。子组件的路由视图会渲染在这个<router-view>中。另外，同样需要一个<router-link>导航链接，用于跳转子路由。这个链接会触发子路由的加载，并在<router-view>中显示子组件。嵌套路由的实现4嵌套路由父组件页面效果图嵌套路由的实现子组件页面效果图4嵌套路由嵌套路由在实际开发中有着广泛的应用，例如：（1）多级菜单：在具有多级导航的应用中，嵌套路由可以帮助实现不同级别的菜单跳转。（2）详情页面：在商品详情页或文章详情页中，嵌套路由可以用于展示不同层级的信息。（3）工作流：在需要引导用户通过多个步骤完成操作的应用中，嵌套路由可以清晰地表示步骤之间的层级关系。通过掌握嵌套路由的使用，你可以构建出结构清晰、易于维护的大型Web应用。嵌套路由的应用5编程式路由在Vue应用中，除了使用声明式的<router-link>组件来实现页面跳转外，我们还可以通过编程式导航来控制路由跳转。编程式导航允许我们在代码中动态地控制路由的变化，这在处理复杂的用户交互和应用逻辑时非常有用。编程式导航是指通过JavaScript代码直接调用路由方法来实现页面跳转，而不是通过HTML标签的属性。这种方式提供了更高的灵活性，使得我们可以根据应用的状态和用户的操作来决定何时以及如何跳转路由。编程式路由的概念5编程式路由在VueRouter中，我们可以通过useRouter钩子函数来获取路由实例，并使用其提供的方法来进行编程式导航。以下是如何使用编程式导航的基本步骤：编程式路由的实现（1）获取路由实例在组件中，使用useRouter钩子函数来获取路由实例。5编程式路由编程式路由的实现（2）使用编程式导航方法使用路由实例的编程式导航方法push、replace或go来实现页面跳转。其中：push方法会向历史记录添加一个新的记录；replace方法则会替换当前的历史记录项；go方法的参数是一个整数，用于表示在历史记录中向前或向后多少步，如果参数是0，则表示刷新当前路由。5编程式路由编程式路由的实现（3）在模板中绑定事件在组件的模板中，将定义的方法绑定到事件上，如按钮点击事件，以触发方法。点击“跳转关于我们”按钮，则页面跳转关于我们页面；点击“跳转个人中心”按钮，则页面跳转个人中心页面；点击“跳转上一页”，则页面跳转上一页。5编程式路由编程式路由的应用编程式导航在以下场景中非常有用：（1）表单提交：在表单提交后，你可能需要导航到另一个页面，并带上一些查询参数。（2）条件导航：根据某些条件动态决定导航的目标路由。（3）复杂的用户交互：在用户完成一系列操作后，需要导航到不同的页面。在使用编程式导航时，需要注意处理异步操作，确保在异步操作完成后再进行导航，另外还需保证良好的用户体验，可以考虑使用加载状态或动画来提升用户体验。6重定向在Vue应用中，除了使用声明式的<router-link>组件来实现页面跳转外，我们还可以通过编程式导航来控制路由跳转。编程式导航允许我们在代码中动态地控制路由的变化，这在处理复杂的用户交互和应用逻辑时非常有用。编程式导航是指通过JavaScript代码直接调用路由方法来实现页面跳转，而不是通过HTML标签的属性。这种方式提供了更高的灵活性，使得我们可以根据应用的状态和用户的操作来决定何时以及如何跳转路由。重定向的概念6重定向路由重定向的实现方式很简单。我们只需要路由配置文件中添加以下代码，即可实现路由重定向：在这个定义中，当用户尝试访问/old-path时，他们将被自动重定向到/new-path。重定向的实现6重定向以404页面为例，我们来实现当访问不存在页面时跳转404页面的效果。打开项目，在src/router/index.js文件中，添加以下代码：重定向的实现6重定向此时，当我们访问项目中不存在的路径时，就会跳转404页面，页面效果如下图所示：重定向的实现6重定向重定向主要有以下应用场景：用户输入错误：当用户输入错误的URL时，可以通过重定向将他们引导到正确的页面。链接更新：在网站更新或迁移过程中，旧链接可能已失效，重定向可以确保用户访问旧链接时被引导到新页面。权限控制：在需要根据用户权限显示不同页面的情况下，可以使用重定向来控制访问权限。重定向的应用7导航守卫VueRouter提供的导航守卫主要用来通过跳转或取消的方式守卫导航。导航守卫允许开发者在路由跳转时执行自定义逻辑，用于权限验证、动态调整页面标题及更新元信息等，实现精确灵活的路由控制。导航守卫机制包括全局守卫和特定路由守卫，它们分别作用于所有路由或单个路由。全局守卫影响整个应用的路由跳转，适用于全局状态更新，例如用户认证状态检查。而特定路由守卫则只影响单个路由，适用于特