Vue Router 4 的变化及炫酷特性

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

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及个人系列文章。

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中添加的一些新特性，你们能够到官网去了解一下更多的信息。

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

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://vuejsdevelopers.com/t...

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试完整考点、资料以及个人系列文章。