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。 这样可以方便快捷地进行如下操作:
文末
如果30岁以前,可以还不知道自己想去做什么的话,那30岁之后,真的觉得时间非常的宝贵,不能再浪费时间在一些碎片化的事情上,比如说看综艺,电视剧。一个人的黄金时间也就二,三十年,不能过得浑浑噩噩。所以花了基本上休息的时间,去不断的完善自己的知识体系,希望可以成为一个领域内的TOP。
同样是干到30岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说30岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
前端面试题汇总
JavaScript
参考docs.qq.com/doc/DSmRnRGxvUkxTREhO