乐趣区

关于javascript:Vue-Router-4-的变化及炫酷特性

jiezi

作者：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… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版