当前位置: 首页 > Web前端 > vue.js

Vue3中的VueRouter初探

时间:2023-03-31 20:07:33 vue.js

管理路由是大多数单页应用程序的基本功能。随着新版本的VueRouter处于Alpha阶段,我们已经可以开始了解它在下一个版本的Vue中是如何工作的。Vue3中的许多变化会稍微改变我们访问插件和库的方式,其中包括VueRouter。我们将结合当前的Vue3alpha版本使用VueRouter的alpha版本进行研究。本文通过一个不错的小示例向您展示了如何将VueRouter添加到您的Vue3项目中!设置首先,我们将使用EvanYou发布的Vue3Webpack预览版。让我们使用gitclonehttps://github.com/vuejs/vue-next-webpack-preview.git克隆存储库。然后,要将vue-routeralpha添加到我们的项目中,我们修改package.json文件。在我们的依赖项中,我们要添加以下版本的vue-router"dependencies":{"vue":"^3.0.0-alpha.10","vue-router":"4.0.0-alpha.4"}现在我们终于可以从命令行运行npminstall来安装所有依赖项了。我们的最终设置是实际创建您的路由文件和一些映射到它的视图。在src/文件夹中,我们将添加三个文件。router/index.jsviews/Home.vueviews/Contact.vue我们的路由器文件将包含我们的路由器,我们的Home/Contact视图将只输出一个词,以便我们可以看到发生了什么。创建路由万事俱备,让我们开始使用VueRouter吧!简而言之,VueRouterVue3版本的主要区别在于我们必须导入新方法才能使代码正常工作。其中最重要的是createRouter和createWebHistory。在我们的router/index.js文件中,让我们将这两个方法与之前的两个视图一起导入。import{createRouter,createWebHistory}from'vue-router'importHomefrom'../views/Home.vue'importContactfrom'../views/Contact.vue'接下来我们要做的就是使用createWebHistory创建routerHistory对象的方法。import{createRouter,createWebHistory}from'vue-router'importHomefrom'../views/Home.vue'importContactfrom'../views/Contact.vue'constrouterHistory=createWebHistory()在此之前,我们可以Justtypemode:history从哈希模式切换到历史模式,但现在我们使用history:createWebHistory()来做到这一点。接下来,我们实际上可以使用createRouter创建路由器,它接受我们想要传递给routerHistory变量的对象以及两个路由的数组。constrouter=createRouter({history:routerHistory,routes:[{path:'/',component:Home},{path:'/contact',component:Contact}]})最后,让我们导出路由。exportdefaultrouter正如你所见,它仍然与Vue2非常相似。然而,随着所有这些变化,Typescript得到了更好的支持和优化,所以熟悉新方法是件好事。使用vue路由器现在我们的Vue路由器文件已经设置好了,我们可以将它添加到项目中。以前,我们可以导入它和Vue.use(router),但这在Vue3中是不一样的。在main.js文件中,您会看到我们正在使用Vue中的createApp方法来实际创建我们的项目。在默认项目中,它链接了createApp和mount方法。constapp=createApp(App)app.mount('#app')然后,在我们挂载我们的应用程序之前,我们要告诉它使用路由器文件。importrouterfrom'./router'constapp=createApp(App)app.use(router)app.mount('#app')最后,在我们的App.vue文件中,让我们实际显示我们的路由器视图并提供一些路由器-链接,以便我们可以四处导航。所以现在,如果我们点击,我们会看到实际上是可能的在两个页面之间导航!但是,如果我们尝试直接转到我们的/contact路由,那是行不通的!我们遇到了某种错误。幸运的是,使用webpack可以很快解决这个问题。在我们的webpack.config.js文件中,我们希望通过更改配置使devServer能够使用historyapi,因此它看起来像这样。devServer:{inline:true,hot:true,stats:'minimal',contentBase:__dirname,overlay:true,historyApiFallback:true}现在,如果我们直接导航到/contact路由,一切都应该正常工作摘要我们已经成功添加vue-router到我们的Vue3项目。大多数其他功能(例如导航守卫、处理滚动条)与这些功能大致相同。这是本教程最终Github存储库的链接。如果您想在Vue3beta中安装vue-router,这是一个很好的样板代码。文章首发《前端外文精选》微信公众号继续阅读其他好评文章你所不知道的CSS国际化React.js和Vue.js语法并排图片技术总结,优缺点以及介绍各种图片的例子前端开发在Vue.js中编写更好的v-for循环的6个技巧2020年12Vue.js开发技巧和窍门【技巧】CSS如何实现文本对齐效果?7道简单但有技巧的JavaScript面试题,让你在2020年成为前端高手。9个项目【笔记】Web全栈工程师的自我修养(上)【笔记】Web全栈工程师的自我修养(下)【小技巧】如何防止H5页面弹出手机虚拟键盘?拒绝JavaScript,这三个CSS技巧你一定要用好ChromeDevTools的7个隐藏功能,可以提高你的工作效率【图文教程】同步你的VSCode设置和扩展插件,换手机不用愁更多...