作者：MattMaribojoc译者：前端小智来源：stackabuse有梦想，有干货，微信搜索【大招天下】关注这位洗碗智者谁一大早还在洗碗。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。VueRouter4已经发布，让我们来看看新版本中一些很酷的特性。Vue3支持Vue3引入了createAppAPI，它改变了将插件添加到Vue实例的方式。因此，之前版本的VueRouter将无法兼容Vue3。VueRouter4引入了createRouterAPI，它创建了一个可以安装在Vue3中的路由器实例。//src/router/index.jsimport{createRouter}from"vue-router";exportdefaultcreateRouter({routes:[...],});//src/main.jsimport{createApp}from"vue";importrouterfrom"./router";constapp=createApp({});app.use(router);app.mount("#app");Historyoption在早期版本的VueRouter中，我们可以使用mode属性to指定路由的模式。哈希模式使用URL哈希来模拟完整的URL，以便在URL更改时不会重新加载页面。history模式利用HTML5HistoryAPI实现URL导航，无需重新加载页面。//VueRouter3constrouter=newVueRouter({mode:"history",routes:[...]});在VueRouter4中，这些模式被抽象成模块，可以导入并分配给新的history选项。这种额外的灵活性使我们能够根据需要自定义路由器。//VueRouter4import{createRouter,createWebHistory}from"vue-router";exportdefaultcreateRouter({history:createWebHistory(),routes:[],});动态路由VueRouter4提供了addRoute方法来实现动态路由。这种方法一般很少使用，但它确实有一些有趣的用例。例如，假设我们要为文件系统应用程序创建一个UI，并且我们要动态添加路径。我们可以这样做：方法：{uploadComplete(id){router.addRoute({path:`/uploads/${id}`,name:`upload-${id}`,component:FileInfo});}}我们还可以使用以下相关方法：removeRoutehasRoutegetRoutesNavigationguardscanreturnvaluesnotnextNavigationguards是VueRouterhooks，允许用户在跳转之前或之后运行自定义逻辑，例如beforeEach，beforeRouterEnter等。它们通常是用于检查用户是否有权访问某个页面、验证动态路由参数或销毁侦听器。在版本4中，我们可以从钩子方法中返回值或Promise。这允许像这样快速简单的操作：//VueRouter3router.beforeEach((to,from,next)=>{if(!isAuthenticated){next(false);}else{next();}})//Vue路由器4router.beforeEach(()=>isAuthenticated);这些只是版本4新增的一些功能，大家可以去官网了解更多。~最后，我是前端的小智，我要搭建了。我们下期再见~代码部署后可能存在的BUG无法实时获知。之后为了解决这些bug，我花了很多时间在日志调试上。顺便在这里给大家推荐一个好用的BUG监控工具Fundebug。原文：https://vuejsdevelopers.com/t...交流有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
