在 Vue Router API 从 v3（Vue2）到 v4（Vue3）的重写过程中，大部分的 Vue Router API 都没有变化，但是在迁移你的程序时，你可能会遇到一些破坏性的变化。本指南将帮助你了解为什么会发生这些变化，以及如何调整你的程序，使其与 Vue Router4 兼容。
变化的顺序是按其用途排列的。因此，建议按照这个清单的顺序进行。
Vue Router 不再是一个类，而是一组函数。现在你不用再写 ，而是要调用 :
配置已经被一个更灵活的 配置所取代。根据你使用的模式，你必须用适当的函数替换它：
- :
- :
- :
下面是一个完整的代码段：
在 SSR 上使用时，你需要手动传递相应的 history：
原因：为未使用的 history 启用摇树，以及为高级用例（如原生解决方案）实现自定义 history。
现在， 配置被作为 (其他 history 也一样)的第一个参数传递：
创建路由时不再支持 属性：
原因: Vue 支持的所有浏览器都支持 HTML5 History API，因此我们不再需要使用 ，而可以直接使用 。
现在必须使用自定义的 regex 参数来定义所有路由(、)：
原因：Vue Router 不再使用 ，而是实现了自己的解析系统，允许路由排序并实现动态路由。由于我们通常在每个项目中只添加一个通配符路由，所以支持 的特殊语法并没有太大的好处。参数的编码是跨路由的，无一例外，让事情更容易预测。
路由器实例上的 对象的属性在以前可以被直接访问。
从 vue-router v4 开始，路由器实例上的 对象的底层类型已被改为 ，其源自 Vue 3 中新引入的响应式基础。
当你使用 或 获取路由信息时这并不会带来任何变化，如果想要直接在路由器实例上访问它，你需要通过 来访问实际的路由对象：
现有的 函数已被 取代，该函数不接受任何参数并返回一个 Promise：
中返回的对象与 类似： 改名为 ， 改名为 。详见 RFC。
原因：使该对象类似于 ，以使其感觉更像原生 JS API，并有可能启用将来的新配置。
和 现在必须通过 API 在 内部使用：
原因: 这是一个必要的变化。详见 related RFC.
中的 属性已被删除。你可以手动将值设置到现有的 中：
你必须在 App 实例上定义一个全局的 函数：
原因： 使用频率不高，用户可以很容易地实现。
中的 和 属性都已被删除。你可以使用 API 来完全定制 ：
原因：这些属性经常一起使用，以使用与 标签不同的东西，但这些属性是在 API 之前引入的，并且没有足够的使用，因此没有足够的理由为每个人增加 bundle 包的大小。
属性已被删除，因为不再存在要修复的警告，所以你应该能够安全地删除它。但，有两件事你应该注意：
- 路由现在是基于它们所代表的路由记录来激活的，而不是路由地址对象及其 、 和 属性来激活的
- 只匹配 部分， 和 不再考虑
如果你想自定义这种行为，例如考虑到 部分，你应该使用 API 来扩展。
原因: 详见 RFC about active matching。
目前不支持 mixins 中的导航守卫，你可以在 vue-router#454 追踪它的支持情况。
和 已合并到 中，签名略有不同。详见 API。
原因：将用于同一目的的多种方法统一起来。
方法现在被删除，因为匹配的组件可以从 中获取：
原因：这个方法只在 SSR 中使用，并且是用户一行就能完成的操作。
以前，有一个未被记录的特性允许将重定向记录设置为形如 的特殊路径，并且它会复用现有的参数 。现在它已不再支持，有两个替代选项:
- 使用不包含参数的路由名称：。注意，当参数 为可选项时它不会生效
- 使用一个函数重建基于目标的新位置：
原因：这种语法很少使用，是上述版本的等效做法，但是相比之下还不够简短，同时会引入一些复杂性，使路由器变得更重。
所有的导航，包括第一个导航，现在都是异步的，这意味着，如果你使用一个 ，你可能需要等待路由 ready 好后再挂载程序：
否则会有一个初始过渡，就像你提供了 属性到 一样，因为路由会显示它的初始地址（什么都没有），然后显示第一个地址。
请注意，如果在初始导航时有导航守卫，你可能不想阻止程序渲染，直到它们被解析，除非你正在进行服务器端渲染。否则，在这种情况下，不等待路由准备好挂载应用会产生与 Vue2 中相同的结果。
用于表示注入路由的最后一个根组件（Vue 实例）。Vue Router 现在可以被多个 Vue 程序同时安全使用。你仍然可以在使用路由时添加它：
你也可以扩展 接口的 TypeScript 定义来添加 属性。
原因：Vue3 写的程序不能在 Vue2 中使用，现在我们使用同一个 Router 实例来支持多个程序，因此拥有 属性可能会产生误导，因为它是程序而不是根实例。
之前你可以直接传递一个模板，通过嵌套在 组件下，由路由组件的 来渲染：
由于 引入了 API，你必须使用 API 将其传递给 ：
属性已从标准化路由地址（ 和 返回的对象）中删除。你仍然可以通过 数组访问它：
原因：同时存在 和 会造成不必要的循环引用，而属性可以通过 来检索。
路由的 和 属性已被 的 和 配置取代。现在，当使用 创建路由时，它们也可以直接传递。 的任何其他特定配置已被删除，因为 已不再用于解析路径。
由于取消了 ，所以不再支持未命名的参数：
- 变成
- 变成
- 变成
Vue Router 将信息保存在 上。如果你有任何手动调用 的代码，你应该避免它，或者用的 和 进行重构：
同样，如果你在调用 时没有保留当前状态，你需要传递当前 ：
原因：我们使用历史状态来保存导航信息，如滚动位置，以前的地址等。
中的 属性现在是必需的。
原因：路由的设计是为了创建路由，尽管你可以在以后添加它们。在大多数情况下，你至少需要一条路由，一般每个应用都会编写一次。
跳转或解析不存在的命名路由会产生错误：
原因：以前，路由会导航到 ，但不显示任何内容（而不是主页）。抛出一个错误更有意义，因为我们不能生成一个有效的 URL 进行导航
在没有传递所需参数的情况下跳转或解析命名路由，会产生错误：
原因：同上。
给予任何空 的嵌套命名路由：
现在，导航或解析到命名的路由 时，会产生一个不带斜线的 URL：
这对子级 有重要的副作用，如下所示：
请注意，如果 是 ，这也可以，因为 到 的相对地址确实是 ，但 到 的相对地址是 。
原因：这是为了使尾部的斜线行为保持一致：默认情况下，所有路由都允许使用尾部的斜线。可以通过使用 配置和手动添加(或不添加)斜线来禁用它。
无论在哪里启动导航，、和 中的解码值现在都是一致的（旧的浏览器仍然会产生未编码的 和 ）。初始导航应产生与应用内部导航相同的结果。
给定任何规范化的路由地址:
- , 中的值不再被解码了。例如，直接在地址栏上写 "https://example.com/hello world"，将得到编码后的版本："https://example.com/hello world"，而 "path "和 "fullPath "都是"/hello%20world"。
- 现在被解码了，这样就可以复制过来。 可以直接用于 scrollBehavior 的 配置中。
- 当使用 、 和 并在对象中提供 地址或 属性时，必须进行编码(像以前的版本一样)。另一方面，、 和 必须以未编码的版本提供。
- 斜线字符()现在已在 内正确解码，同时仍在 URL 上产生一个编码版本：。
原因：这样，在调用 和 时，可以很容易地复制一个地址的现有属性，并使产生的路由地址在各浏览器之间保持一致。 现在是幂等的，这意味着调用 、、 和 不会产生额外的编码。
为了使类型更一致，更有表现力，有些类型被重新命名：
Vue Router4 中需要关注的一些新功能包括：
- 动态路由
- 组合式 API
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/43200.html