作者: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
算法
-
冒泡排序
-
选择排序
-
快速排序
-
二叉树查找: 最大值、最小值、固定值
-
二叉树遍历
-
二叉树的最大深度
-
给予链表中的任一节点,把它删除掉
-
链表倒叙
-
如何判断一个单链表有环
由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!