管理路由是大多数单页应用程序的基本功能。随着新版本的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文件中,让我们实际显示我们的路由器视图并提供一些路由器-链接,以便我们可以四处导航。
