作者:Matt Maribojoc
译者:前端小智
来源:stackabuse
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
Vue Router 4 已经发布了,我们来看看新版本中有哪些很酷的特性。
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");
在 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
});
}
}
我们还可以使用以下相关方法:
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... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
转载自: https://cloud.tencent.com/dev... 本文转自网络,版权归原作者所有,...
一、少用偏门。 类似break-word断行,z-index手动分层,还有像垂直对齐等等这些...
Kotlin 以其简洁的特性而闻名,而在我们的实践中,更加简洁就意味着更加高效。事...
本文译自博客Usability Counts,译者@C7210 。原文作者Patrick Neeman是用户体验...
古老的话题:一首古诗的分离 1.给你一首古诗,保存为毫无格式的一堆文字,你去理...
大家好,我是卡颂。 我是个恋旧的人, Github 头像还是上古时期端游 仙剑奇侠传 ...
内容一览:随着公民法制意识的觉醒,越来越多的人选择拿起法律的武器捍卫自己的...
一夜间,手机游戏Pokemon Go(中文名:宠物小精灵)爆红。在海外,一大波玩家夜...
可能有人还没接触到这个问题过,先说明一下,什么是自适应高度吧。所谓iframe自...
大家知道css的position absolute默认是根据document来设置的,比如position:abso...