Vu基础及其开发 1

第八章VueRouter路由管理学习目标熟悉路由的概念和作用熟练VueRouter的安装和使用熟练动态路由、嵌套路由、命名路由、编程式导航的使用熟练路由间数据的传递熟悉路由导航守卫的使用在单页面应用中，最突出的特性是页面的快速切换、流畅的转场动画以及简便的数据传递。虽然在单页面应用中可以通过组件切换来实现页面转换效果，但是组件切换管理复杂，并且需要解决数据传递的问题。为了在Vue中通过不同的URL访问不同的内容来实现页面切换，我们需要使用VueRouter，它是Vue生态系统提供的路由管理系统。本章将详细介绍VueRouter是如何实现路由、数据传递以及导航守卫的。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参路由介绍和实现路由的概念最初出现在网络通信领域，其中包括路由器。路由器是一种硬件设备，用于连接两个或多个网络，通过一定的规则将不同网络之间的通信通道进行绑定，从而实现数据传输功能。随后，路由的概念被引入到软件开发领域，最早应用在后端服务器中。在后端路由中，当浏览器通过不同的URL访问资源时，服务器会根据URL的不同返回相应的资源内容。在早期，由于HTML内容通常是由后端进行渲染并返回的，因此URL通常用于访问HTML页面，并且页面之间的跳转是通过超链接、表单提交或者使用JavaScript的location等方式实现的。这种形式的跳转被称为多页面应用跳转，但它存在一些缺陷，如跳转速度较慢、会导致整个页面刷新等问题。随着后端与前端的分离，许多资源和逻辑都被转移到前端中，前端通过Ajax技术与后端进行数据交互。前端负责对数据进行处理，并进行页面的渲染和交互，而后端则专注于数据处理方面的工作。特别是随着单页面应用的兴起，前端路由成为了页面跳转的一种选择方式。通过前端路由，实现了在单页面应用中页面的切换和导航。这种方式使得前端更加灵活和可控，可以根据需求动态加载页面内容，提供更好的用户体验。前端路由是通过特定的技术手段，在不同的URL访问下，将对应的内容映射到页面中的不同DOM元素以实现页面跳转的效果。这种方式具有快速跳转、可添加动画效果以及在页面内跳转时无需刷新整个页面的优势。前端路由的实现通常借助于URL的Hash值或HTML5提供的HistoryAPI来实现。路由介绍和实现1．基于URL的hash值实现路由hash值是指URL中的"#"符号及其后面的内容，例如在地址"http://localhost:8080/#/home"中，"#/home"就是hash值。需要注意的是，通常情况下修改URL中的路径会导致重新请求服务器内容，因为路径的改变会触发浏览器向服务器发送新的请求。然而，如果只修改哈希值部分，则不会重新请求服务器内容，并且浏览器在发送请求时不会包含哈希值，只会将其记录添加到浏览器的访问历史中。利用这个特点，可以通过修改url地址中的hash值，来显示不同的DOM内容以达到切换页面的效果。当URL的Hash值发生改变时，我们可以通过监听“hashchange”事件来捕获这一变化。通过监听该事件，我们可以根据新的hash值来切换显示不同的内容。

路由介绍和实现上述代码中，当用户点击超链接<a>并触发了页面跳转时，浏览器会自动更新URL的哈希值部分。通过监听hashchange事件，我们可以捕获到这个变化，并获取新的哈希值。根据不同的hash值，可以进行更新页面内容、切换视图等操作，以展示与hash值对应的页面内容。2．基于HTML5的HistoryAPI实现路由熟悉HTML的都知道，窗口对象window提供了一个可以操作浏览器历史的对象history，使用history对象可以实现浏览器中页面的前进和后退等功能。当然了，history中能够操作的url都是用户访问过的url，对于没有访问过的url则无法进行跳转。在HTML5的时候新增了HistoryAPI操作历史记录的相关接口，最主要的就是pushState和replaceState接口，如表所示。API说明pushState(stateObject,title,url)向history中添加一条历史记录。replaceState(stateObject,title,url)替换掉当前的历史记录记录。路由介绍和实现操作HistoryAPI也不会导致整个页面的刷新,利用这个特点同样可以实现路由的功能。

需要注意的是，上述代码不能直接打开html运行，需要使用LiveServer或其他本地服务程序运行网页才可以，否则会报错。路由介绍和实现History和hash虽然都可以实现路由的功能，但是还是有一些不同之处，如表所示。对比项HashHistoryAPI实现方式利用url地址栏的hash值的修改，通过hashchange事件监听实现。利用浏览历史记录栈的API实现。Url地址区别url地址中有‘#’。History是直接添加到host地址，Url地址中没有‘#’。相同url的处理相同url地址不会添加到历史记录中。相同的url，会添加到历史记录中。刷新页面刷新页面，url中#后面的内容不会包含在请求中，所以刷新页面没有影响。History模式下，url是一个完整的请求，刷新页面浏览器会重新请求服务器，如果服务器没有相应url的响应资源的话，就很容易出现404错误。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参VueRouter的基本使用VueRouter是Vue.js生态系统中官方提供的路由管理插件，与Vue.js核心深度集成。借助VueRouter，Vue可以更加轻松简单地构建单页面应用。在Vue单页面应用中，主要通过切换组件的显示和隐藏来展示不同页面的内容。而VueRouter的主要作用是将路由地址映射到对应的组件，从而实现对页面的管理。它负责处理URL的变化，并根据路由配置将不同的URL映射到相应的组件。通过VueRouter，我们可以在不同的URL路径下展示不同的组件内容，实现页面之间的无缝切换和导航。VueRouter简化了路由配置和管理的过程，使得开发者可以更加专注于页面的展示和交互逻辑。VueRouter提供了非常丰富的路由功能，主要如下：支持嵌套路由映射支持动态路由映射支持模块化、基于组件的路由配置支持路由参数、查询和通配符的使用支持由Vue为路由提供切换时的过渡效果提供更加细致的路由导航控制支持HTML5history模式或hash模式接下来，我们将详细介绍VueRouter的具体的使用。VueRouter的基本使用1．VueRouter的安装VueRouter可以通过两种方式进行安装：CDN链接和npm/yarn安装。对于在HTML文件中使用VueRouter，推荐使用CDN链接直接导入使用。如下：对于使用VueCLI或Vite工具构建的项目，建议使用npm或yarn的安装方式。使用VueCLI创建一个“vue-router”的项目，创建项目时，可以选择带有VueRouter依赖的模板，这样会自动集成VueRouter到项目中。如果在创建项目时未选择带有VueRouter的模板，也可以在项目目录下使用以下命令安装VueRouter依赖：或者

<scriptsrc="/vue-router@4"></script>npminstallvue-router@4yarnaddvue-router@4VueRouter的基本使用安装成功后，可以在项目下的package.json文件中看到VueRouter的相关依赖信息，如下所示：对于Vue版本为3.x.x的项目，需要使用VueRouter的相应新版本，本书中使用的是VueRouter版本为4.x.x。这是因为VueRouter4.x.x是专为Vue3.x.x版本设计的，可以提供更好的兼容性和性能。VueRouter的基本使用2．VueRouter的基本使用本章节中以SPA应用为例来讲解下如何在项目中使用VueRouter，步骤如下：①首先在工程目录“src”下的“components”目录中创建两个组件，分别为Home.vue和About.vue。

VueRouter的基本使用②将创建好的两个组件交给VueRouter进行管理。由于单页面应用的默认首页组件通常是App.vue，我们可以在App.vue中配置路由的渲染出口。修改后的App.vue如下所示。

代码中，使用VueRouter时，需要使用两个自定义组件<router-link>和<router-view>。<router-link>组件用于创建链接并跳转到其他页面组件。与使用<a>标签不同的是，<router-link>可以在不重新加载页面的情况下生成和更改URL地址，实现单页面应用的页面切换。它会自动监听点击事件，并根据配置的路由路径进行页面跳转。<router-view>组件则是用作路由的出口，它负责根据当前URL匹配到的路由路径，将相应的组件渲染到指定位置进行显示。我们在App.vue或其他父组件中定义<router-view>的位置，这样其他路由组件就会在该位置进行渲染。VueRouter的基本使用③在使用VueRouter之前，我们需要在项目中定义路由的映射关系，并在Vue应用中使用VueRouter插件才能正常运行。在main.js文件中定义一个名为routes的路由列表。在这个列表中，可以定义需要使用的路由对象，每个路由对象都映射了一个path路径和对应的component组件，还可以包含其他的参数配置。路由的创建通过vue-router提供的createRouter函数实现，在createRouter函数中，可以将routes列表作为参数传递给VueRouter对象。因为VueRouter本身也是Vue的一个插件，所以在Vue中使用VueRouter时，需要使用app.use(router)来注册它。VueRouter的基本使用上述代码中，createRouter创建路由对象时可以进行路由的选项配置。history选项为路由的实现模式，这里使用createWebHashHistory表示基于hash的路由实现。④执行“npmrunserve”命令运行项目，项目运行后可以通过点击"Home页面"和"About页面"的链接来切换页面组件。此外，还可以直接在浏览器的地址栏中输入相应的URL映射地址来切换页面组件。如图所示。VueRouter的基本使用3．路由对象有时候，在某些逻辑处理完成后，我们需要将一个路由添加到浏览器的历史记录中，或者替换当前的路由，例如登录成功后跳转到首页。还可能需要传递一些参数，例如点击商品后跳转到商品详情页，需要传递商品的ID。这些操作都需要使用路由对象来实现。在之前的案例中，我们通过使用createRouter函数传递一些路由配置参数来创建并返回一个全局的路由对象router。在main.js中创建并返回了这个router对象。如果您想在页面组件中使用路由对象，可以通过this.$router获取与createRouter返回的对象相同的路由实例。而this.$router获取的是全局的路由对象，如果您想获取当前路由的对象信息，可以使用this.$route对象。我们在About.vue中获取并显示路由相关信息。代码如右图所示。上述代码中，点击按钮调用了goHome方法，goHome方法中通过this.$router.replace替换当前路由的方式切换了页面。this.$router和this.$route其他操作，会在后面的内容中进行详细的讲解。VueRouter的基本使用4．路由模式在Vue3之前配置路由模式是在创建Router对象的时候设置mode参数，在Vue3中使用了更灵活的history配置取代了mode，如下：history配置提供了三个函数的实现，分别为createWebHistory()、createWebHashHistory()和createMemoryHistory()。createWebHistory()表示创建一个基于HTML5HistoryAPI实现的历史记录。提供可选参数base，如果应用的域名是“”，默认没有base表示应用托管在域名的根目录下，如果设置了base，如createWebHistory('/shop/')那访问应用就变成了“/shop”。如果服务器配置了相关的URL资源，或者对SEO（搜索引擎优化）要求高的情况下，就需要使用createWebHistory模式；createWebHashHistory()表示创建一个基于hash的历史记录。对于没有主机的web应用程序(如file://)，或者服务器没有配置相关URL资源，并且对SEO要求不高的情况下，就推荐使用createWebHashHistory模式。createMemoryHistory()表示创建一个基于内存的历史记录。这个模式主要目的是处理SSR的。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参动态路由匹配之前使用的路由都是固定URL的静态路由，但是在很多情况下，我们需要根据路由将同一类型的操作映射到同一个组件来显示。例如，存在一个名为User的用户信息组件，所有的用户信息都应该使用这个组件进行渲染，但每个用户的数据又是不同的。通常会根据用户的ID来获取用户信息并进行渲染，在这种情况下，需要通过路由匹配将用户的ID参数传递给User组件。静态路由无法实现参数的传递，因此需要使用动态路由进行匹配以实现此功能。动态路由传参可以通过params路径参数和query查询参数两种方式来实现，下面我们来看下这两种的实现。1．params传参在VueRouter中，可以使用动态字段在路径中实现参数传递到组件中，这种参数也被称为路径参数。路径参数使用冒号（:）来表示。当一个路由包含路径参数并映射到组件时，可以在组件中使用this.$route.params来获取这些参数。下面以根据用户ID显示不同的信息为例。首先在components目录下定义一个User.vue用来渲染用户信息。动态路由匹配动态路由需要在定义路由的时候指定路径参数的匹配模式。在main.js中引入User.vue组件并命名为User，然后在routes中添加path为“/user/:id”的路由对象。最后，在浏览器的地址栏中输入项目路径加"/user/10"或者"/user/:10"，其中10代表传递给路径参数id的值。随后按下回车键，我们可以在User组件中看到相应的参数显示出来。动态路由匹配

动态路由的传参，在使用<router-link>的时候路径参数也是同上图中一样的写法。路径参数也可以传递多个动态值，格式如下：

在进行路由匹配时，默认的路由匹配模式要求同时使用指定的多个参数，否则路由将无法成功匹配。需要注意的是，在多个路由匹配指向相同组件时，组件实例将会被重复使用。比如：“/user/10”和“/user/11”都指向了User组件，那么User组件将会被复用不会反复的创建和销毁，这样组件的使用将会非常的高效。组件一旦被复用，其生命周期钩子将不会被调用，如果想要对组件中参数的变化做出响应的话，可以对$route对象的任意属性进行watch监听，或者使用beforeRouteUpdate导航守卫来实现。动态路由匹配2．query

传参除了使用路径参数传递动态值外，还可以通过URL的查询参数部分实现动态传值。查询参数位于资源路径后面，从"?"开始到"#"为止之间，每个查询参数的格式为"key=value"，多个参数之间使用"&"符号分隔。比如URL为“http://localhost:8080?id=1001&name=lisi”，其中“id=1001”和“name=lisi”都是查询参数。使用查询参数进行动态传值的路由匹配模式与正常定义路由的方式相同，如下所示。当一个查询参数传递到组件中时，可以使用this.$route.query对象获取到，修改后User.vue中的代码如下。动态路由匹配在浏览器地址栏的项目路径后输入“/user?id=20&name=zhangsan”，可以看到信息显示在User组件中，如图所示。动态路由匹配3．路由的匹配语法通常情况下，路由的匹配设置的都是静态路由“/user”或者动态路由“/user/:id”形式，除了这两种语法外，VueRouter还支持使用正则表达式进行灵活的路由匹配。比如，有用户中心和用户编辑两个页面组件，为了区分它们通常会使用两个不同的路径配置路由。除了这样的匹配规则外，还可以使用正则表达式用同一个路径“/user”来同时处理这两个路由的匹配。正则表达式可以使用一些字符来进行匹配内容，如\d匹配数字、\w匹配数字-字母-下划线等。正则表达式的使用这里就不再详细讲解。使用了正则表达式的路由匹配规则。动态路由匹配上述代码中，\d在正则表达式中表示匹配数字，并使用了“\\”进行转义。而对于上述定义的路由匹配规则，如果在"/user"后面传入的是数字（如"/user/10"），将匹配到User组件；如果传入的是其他类型，则匹配到UserEdit组件。还可以使用通配符“*”和“+”进行匹配。“*”表示匹配0个或多个路径参数，“+”表示匹配一个以上的路径参数。动态路由匹配默认情况下，路径参数是必须要传递的（使用正则通配符*除外），如果匹配路由的时候希望参数是可选的，可以使用通配符“？”来表示路径参数为0个或1个。VueRouter进行默认路由匹配的时候是灵敏的，并不严格，它不区分大小写也可以省略尾部的斜杠。比如，匹配规则为“/user/:name”，使用/user、/user/lisi、/user/或者/User都可以匹配的到。可以通过设置参数strict严格检查路径末尾是否有斜线或设置参数sensitive来区分大小写，如下所示。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参嵌套路由在开发中，一个页面通常是由多个组件嵌套而成的，这种组件嵌套的方式可以灵活地构建复杂的页面结构。通过组件的嵌套，可以将页面拆分成更小的组件，每个组件专注于特定的功能或视图。这样可以提高代码的可维护性、复用性和组件的独立性。例如，在个人中心页面中，可以包含个人基础信息组件、个人收藏组件以及其他可能的嵌套组件。如图所示。在用户中心页面中，点击基本信息访问/user/info匹配到UserInfo组件，点击个人收藏访问/user/collection匹配到UserCollection组件。在VueRouter中，可以使用嵌套路由来描述组件之间的嵌套关系，以实现复杂页面的构建。嵌套路由在App.vue中使用了<router-view>表示路由渲染的出口，这里的<router-view>其实是一个顶层的路由，其他的路由都是在其内作为它的子路由进行渲染组件。同样地，一个被渲染的组件也可以包含自己嵌套的<router-view>，比如，也可以在User.vue中定义一个<router-view>用来渲染User内部的嵌套组件当一个组件包含自己的嵌套组件时，可以在该组件的模板中使用<router-view>标签作为嵌套路由的出口。这样，当该组件被路由渲染时，嵌套的子路由将会根据当前路径动态渲染到该<router-view>中。下面我们来实现之前图中的案例代码。首先，定义两个组件UserInfo基本信息组件和UserCollection个人收藏组件，如下所示。嵌套路由然后，在main.js文件中对User组件的路由“/user”配置其嵌套路由。在嵌套路由中，UserInfo组件的path值为“info”，但是匹配路由时使用的URL为“/user/info”。这是因为子路由URL匹配时，会将父路由的path与子路由的path拼接起来。需要注意的是，在配置children中的path时不需要添加斜杠，否则会被视为根路径。如果将UserInfo组件的路由path改为“/info”，那么匹配的URL地址为“/info”而不是“/user/info”。嵌套路由最后，在User.vue中定义作为子路由渲染的出口，并添加两个来匹配基本信息组件和个人收藏组件。上述的案例中，当访问“/user”的时候匹配到的是User.vue，页面下面会显示空白。如果想要一进入个人中心页面就显示基本信息，可以把UserInfo组件的路由的path值改为空。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参命名路由和命名视图1．命名路由命名路由，顾名思义带有名字的路由。路由匹配的时候，在组件中使用<router-linkto="path">的方式匹配路由组件，这样做最大的问题就是存在URL的硬编码，path值的修改不利于维护。为了解决这个问题，VueRouter提供了命名路由。在定义路由的时候，除了path之外，可以为任何路由提供name配置，这样做的好处有：匹配路由可以使用name，避免了URL的硬编码；params路径参数可以自动编码和解码；使用name比path更简单，书写时不容易出错；可以绕过路径排序；下面我们以UserInfo路由组件为例来看下命名路由的使用。首先，为UserInfo路由添加name配置。命名路由和命名视图在路由跳转时，to属性不再传递URL值，而是进行属性绑定一个对象。如果在跳转组件时需要传递参数，可以在to属性绑定的对象中添加params属性。同时，在定义路由时，需要在path中指定要使用路径参数的格式。如下所示：命名路由和命名视图2．命名视图命名视图就是为<router-view>提供name属性。有时候，页面由多个组合渲染而成，例如，一个布局包含header头部和main主体内容部分，每个部分都是一个视图。为了区分这些视图，需要为它们分别命名。我们在App.vue创建这样的布局。如果<router-view>没有设置name，那么默认值为default。每个视图都对应的有渲染组件，因此对于同一个路由中的多个视图就需要指定多个组件，需要在配置路由的时候添加components选项。命名路由和命名视图运行代码，可以看到当访问“/”项目路径时，页面中会显示了两个视图的组件内容。有的时候也会出现本身是嵌套路由并且内部有多个命名视图的复杂情况，这时候只需要在嵌套路由配置的时候也指定components选项即可。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参重定向和别名1．路由重定向重定向(Redirect)就是指当接收到网络请求时，可以通过各种方法将网络请求重新指定到其他的网络位置。重定向通常指的是对路径的一种重新指定，重定向之后访问的URL地址也会变成重新指定的URL，重定向在网页、域名和路由中都非常的常见，比如：网站资源是放到“/”项目路径下，当希望访问路径“/index”也可以访问到网站的资源时，就可以使用重定向来完成了。VueRouter支持路由重定向功能。在配置路由时，可以通过给路由添加redirect选项来实现路由的重定向。路由重定向可以通过指定URL路径、组件名，甚至是一个返回重定向目标的函数来实现。这里以访问“/index”重定向到根路径为例。重定向和别名2．别名别名（Alias）即除了规范名称以外的名字。在VueRouter中可以给一个路由指定一个别名alias，在匹配路由的时候除了可以使用path指定的路径外，还可以使用alias匹配到路由，并且访问的URL地址是alias配置的路径。这点区别于重定向，重定向会改变URL地址。比如，将路由“/”别名设置为“/index”。使用别名意味着当用户访问“/index”时，URL仍然是“/index”但是却会匹配到路由“/”。使用别名最大的好处是，可以把任意的URL映射到指定的组件，也不会受到嵌套结构的影响。在嵌套路由中，别名推荐以“/”开头，这样可以使嵌套路径中的路径成为绝对路径。alias的值也可以是一个数组，表示配置多个别名。重定向和别名上述代码中，无论是访问“/user”、“/user/info”还是“/detail”都可以匹配到UserInfo组件。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参路由组件传参虽然使用路径参数也可以实现组件的传参，但是这样组件中使用$route会与路由紧密耦合，不利于组件的复用。为了提高组件的灵活性，VueRouter提供了另外一种组件传参方式—props传参。为路由配置props选项，可以将它当作组件属性在组件内部直接使用。props的值可以是布尔类型、对象类型或函数返回值。此外，props还可以为命名视图中的每个视图设置属性参数。当props的值设置为布尔类型时，params路径参数将被设置为该组件的props。以UserInfo组件配置为例，路由的配置如下：当路由配置了props，那么组件中也需要有props的定义才行，下面修改下UserInfo.vue的代码。当在浏览器中项目的地址后输入“/userinfo/lisi”，可以看到UserInfo组件中获取到了lisi的内容。路由组件传参当props为对象类型时，表示直接原样的给组件设置props属性（注意：组件中还是需要定义props），一个静态的props传入有时也非常的实用。比如，在定义路由的时候可以配置一个showHeader的属性，依次来决定那些路由组件中是可以显示头部布局的。路由的配置代码如下：当props为一个返回函数时，路由传参将变得更加的灵活，它允许将参数进行转换或者结合静态值一起使用。路由组件传参对于有命名视图的路由，就需要对每个命名视图定义props配置，还是以之前命名视图案例为例。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参编程式导航除了使用声明式导航跳转路由页面外，还可以使用JavaScript编程的方式，借助router对象的方法来实现导航操作。router对象操作导航的主要方法如表所示。在编程中，通常使用push()方法来实现导航跳转。push()方法的参数可以是一个字符串或者一个对象。当参数是一个字符串时，表示导航到指定路径的路由；当参数是一个路由对象时，可以指定导航路由的name、params或query参数等。下面准备Home和About两个组件，配置的路由信息如下：API说明push()向history栈添加一个新的记录replace()替换当前history栈中的路由记录go()实现历史记录的前进和后退，负值为后退，正直为前进back()如果可能的话，通过调用history.back()回退历史forward()如果可能的话，通过调用history.forward()在历史中前进编程式导航在Home.vue组件中添加一个按钮，点击该按钮可以导航到About路由，并且还可以传递参数。

代码中，需要注意的是，当参数位对象的时候，path和params不能同时存在，否则params会被忽略掉。可以使用路由名name和params一起使用传递路径参数，但是在声明路由的时候也需要在path上指定路由参数才行。编程式导航replace()和push()的使用类似，只是replace()在导航时不会向history添加新记录，而是替换掉当前的路由。导航的前进和后退，通常使用go()方法。当go()方法参数为正数时，与forward()相同，表示向前移动记录；如果go()的数值太大没有那么多记录则会静默失败。当go()参数为负数时,与back()相同，表示后退记录，同样后退记录数没那么多也会静默失败。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参导航守卫如果想要实现这样的功能：当用户访问个人中心时，如果用户未登录则拒绝访问并导航到登录页面。要实现类似这样的功能，就需要使用路由导航守卫。通过设置导航守卫，可以控制路由的跳转或拒绝导航等功能。VueRouter中导航守卫分为全局守卫、路由独享守卫和组件内守卫三种方式。1．全局守卫全局守卫可以为整个应用设置一个路由导航守卫，全局守卫可以分为全局前置守卫、全局解析守卫和全局后置钩子三种情况。全局前置守卫使用router对象的beforeEach()方法可以设置一个全局前置守卫。全局前置守卫会在导航触发时，按照顺序调用导航。导航守卫上述代码中，beforeEach()方法中有两个参数from和to。from表示要离开导航的路由，to表示导航要进入的路由；方法如果返回false，表示取消当前的导航，即使修改了浏览器中的URL导航也会重置到from路由的地址。beforeEach()函数也可以返回一个路由对象，表示中断当前的导航并跳转到一个新的导航，利用这样的特点就可以实现未登录拦截的功能，示例代码如下所示。

代码中，对beforeEach()方法中使用了async修饰，它和Promise作用一样，表示异步执行的函数。导航守卫全局解析守卫router对象的beforeResolve()类似于beforeEach()，表示注册一个全局解析守卫。解析守卫会在每次导航时都触发，在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，它才会被正确调用。全局解析守卫主要用于导航时获取一些数据或者执行一些其他操作（如：用户无法进入页面执行一些其他操作）。全局后置钩子使用router对象的afterEach()方法可以注册一个全局的后置钩子回调函数。后置钩子会在导航跳转后触发。和守卫不一样之处在于后置钩子不会改变导航本身，它更多的用于页面分析、监控等辅助功能的实现。afterEach()中的参数除了有from和to外，还多了一个failure表示收集到导航失败的信息。导航守卫2．路由独享守卫在定义路由的时候可以给路由添加beforeEnter配置，表示给路由添加独享守卫。独享守卫只会在进入这个路由的时候触发，进入后即使params、query或hash发生改变也不会再次触发。示例代码如下所示。导航守卫3．组件内守卫VueRouter同样为路由组件提供了方法，使得开发者可以在路由组件内直接定义路由导航守卫。组件内守卫提供了三个可配置API分别为：beforeRouteEnter：路由组件的前置守卫，在导航确认前被调用。这时候组件还没有创建，所以不能在此方法中使用this关键字。如果想要获取组件实例，需要使用函数中提供的可选参数next回调方法。beforeRouteUpdate：在路由地址改变并且组件被复用时调用。比如，对于带路径参数的路由，当路径参数改变时，路由组件会被复用，这时候就会触发该回调函数。在beforeRouteUpdate中可以使用this关键字。beforeRouteLeave：在导航离开路由组件时调用，内部可以使用this关键字。导航守卫下面给User组件的路由配置路径参数，然后给User组件添加组件内守卫方法。运行上述代码，可以发现，在第一次访问User组件的时候，beforeRouteEnter函数被调用。当修改了路径参数访问时，beforeRouteUpdate函数被调用并可以获取到参数。如果从User路由跳转到其他路由组件时，beforeRouteLeave函数就会被调用。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参路由懒加载VueRouter支持路由开箱即用的动态导入，也叫懒加载。懒加载可以在某个路由被访问时才加载其组件，而不是一次性加载所有组件。这可以有效地减少应用程序的初始加载时间，可以提高首屏页面的加载速度和应用程序的性能。VueRouter也推荐对所有的路由组件使用动态导入。动态导入需要开发者在配置路由的时候，配置component或components（命名视图）选项。该选项接收一个返回Promise组件的函数，这个函数只会在路由第一次获取页面组件时调用，然后缓存起来，之后的访问都会使用缓存数据。路由组件动态导入还可以使用ECMAScript提供的动态导入函数import()实现。路由懒加载需要注意的是，在路由中不建议使用异步组件。虽然异步组件仍然可以在路由组件中使用，但是路由组件本身就是动态导入的。如果项目使用了webpack的打包器，路由懒加载的方式还可以使用到webpack提供的代码拆分功能。可以将代码拆分为各种捆绑包，然后可以按需或并行加载这些捆绑包，从而提高资源加载的效率。使用webpack对项目打包的时候，如果希望把某个路由下的所有相关组件都打包在同个异步块(chunk)中，比如把用户基本信息、用户收藏都分到用户组中。可以使用webpack的魔法注释webpackChunkName实现组件按组分块，这样webpack会将任何一个异步模块与相同的块名称组合到相同的异步块中。路由懒加载如果项目使用的打包器是Vite，需要在vite.config.js文件的环境配置中设置rollupOptions来定义分块，示例代码如下所示。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参动态操作路由通常情况下，路由的添加是通过routes选项配置来完成的。但是在某些场景下，可能需要对路由进行动态的添加和删除操作。典型的案例就是具备权限操作的网站。例如，不同角色的账号登录后进行操作的菜单路由可能是不同的，这时就需要前端动态地添加路由，然后再设置相应的菜单显示。在VueRouter中动态操作路由的函数有两个router.addRoute()和router.removeRoute()。addRoute()表示添加一条新的路由记录到路由