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 中添加的一些新特性，大家可以到官网去了解一下更多的信息。

以上关于Vue Router 4新版本有哪些新特性的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。