一篇学会Vue Router 4 的变化及炫酷特性

Vue Router 4 已经发布了，篇学我们来看看新版本中有哪些很酷的化及特性。

Vue3 支持

Vue 3 引入了createApp API，炫酷该API更改了将插件添加到Vue实例的特性方式。因此，篇学以前版本的化及Vue Router将与Vue3不兼容。

Vue Router 4 引入了createRouter API，炫酷该API创建了一个可以在Vue3中安装 router 实例。特性

// src/router/index.js import {  createRouter } from "vue-router"; export default createRouter({    routes: [...],篇学 });  // src/main.js import {  createApp } from "vue"; import router from "./router"; const app = createApp({ }); app.use(router); app.mount("#app"); 

History 选项

在 Vue Router的早期版本中，我们可以mode 属性来指定路由的化及模式。

hash 模式使用URL哈希来模拟完整的炫酷URL，以便在URL更改时不会重新加载页面。特性history 模式利用 HTML5 History API 来实现URL导航，篇学也是云服务器提供商化及无需重新加载页面。

// Vue Router 3 const router = new VueRouter({    mode: "history",炫酷   routes: [...] }); 

在Vue Router 4中，这些模式已被抽象到模块中，可以将其导入并分配给新的history 选项。这种额外的灵活性让我们可以根据需要自定义路由器。

// Vue Router 4 import {  createRouter, createWebHistory } from "vue-router"; export default createRouter({    history: createWebHistory(),   routes: [], }); 

动态路由

Vue Router 4 提供了addRoute方法实现动态路由。

这个方法平时比较少用到，但是确实有一些有趣的用例。例如，假设我们要为文件系统应用程序创建UI，并且要动态添加路径。我们可以按照以下方式进行操作：

methods: {    uploadComplete (id) {      router.addRoute({        path: `/uploads/${ id}`,       name: `upload-${ id}`,       component: FileInfo     });   } } 

我们还可以使用以下相关方法：

removeRoute hasRoute getRoutes

导航守卫可以返回值并非next

导航守卫是Vue Router的钩子，允许用户在跳转之前或之后运行自定义逻辑，源码下载例如 beforeEach，beforeRouterEnter等。

它们通常用于检查用户是否有权访问某个页面，验证动态路由参数或销毁侦听器。

在版本4中，我们可以从hook 方法中中返回值或Promise。这样可以方便快捷地进行如下操作：

// Vue Router 3 router.beforeEach((to, from, next) => {    if (!isAuthenticated) {      next(false);   }   else {       next();   } }) // Vue Router 4 router.beforeEach(() => isAuthenticated); 

这些只是版本4中添加的一些新特性，大家可以到官网去了解一下更多的信息。

~完，我是前端小智，去保建了，我们下期见~

作者：Matt Maribojoc 译者：前端小智 来源：stackabuse

原文：https://vuejsdevelopers.com/topics/vue-router/

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。服务器托管