Vue Router 4 的变化及炫酷特性

在 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。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

/13/H4lCoPEF.jpg" />

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

[外链图片转存中…(img-t8c0oDee-1712506886836)]