Vue Router 4 的变化及炫酷特性,真香

64 阅读2分钟

作者:Matt Maribojoc

译者:前端小智

来源:stackabuse

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

本文 GitHub github.com/qq449245884… 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

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

算法

  1. 冒泡排序

  2. 选择排序

  3. 快速排序

  4. 二叉树查找: 最大值、最小值、固定值

  5. 二叉树遍历

  6. 二叉树的最大深度

  7. 给予链表中的任一节点,把它删除掉

  8. 链表倒叙

  9. 如何判断一个单链表有环

由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!

开源分享:docs.qq.com/doc/DSmRnRG…