vue3 route,vue router使用方法

　　ERouter是Vue.js的官方路由管理器(打开新窗口)，它与Vue.js的核心深度集成，可以轻松构建单页面应用。本文主要介绍了vue3使用vue路由器的相关信息，有需要的可以参考一下。

前言

　　对于大多数单页应用程序来说，管理路由是一项基本功能。随着新版本的Vue路由器进入Alpha阶段，我们已经可以开始看到它在下一个版本的Vue中是如何工作的。

　　Vue3中的许多变化将略微改变我们访问插件和库的方式，包括Vue路由器。

一、第一步：安装vue-router

　　npm安装vue-router @ 4 . 0 . 0-beta 13

二、第二步：main.js

　　我们来比较一下vue2和vue3中main.js的区别：(第一个是vue2，第二个是vue3)

　　很明显，vue2中常用的vue对象在vue3中“消失”是因为直接使用了createApp方法，但实际上使用createApp方法创建的App是一个Vue对象，vue2中经常使用的Vue.use()在vue3中可以替换为app.use()正常使用；在vue3的mian.js文件中，使用vue-router直接用app.use()方法调用router。

　　注意：导入路径文件导出的“对应于路径文件的相对路径”中的路径名，项目目录如下(vue2和vue3相同):

三、路由文件

　　从“vue-router”导入{ createRouter，createWebHashHistory }

　　常量路由=[

　　{

　　路径：“/”，

　　component: ()=import(@/pages )

　　},

　　{

　　路径：“/test1”，

　　名称：“测试1”，

　　component:()=import( @/pages/test1 )

　　},

　　{

　　路径：“/test2”，

　　名称：“测试2”，

　　component:()=import( @/pages/test2 )

　　},

　　]

　　导出常量路由器=创建路由器({

　　history: createWebHashHistory()，

　　路线：路线

　　})

　　导出默认路由器

四、app.vue

　　模板

　　路由器视图/路由器视图

　　/模板

　　脚本

　　导出默认值{

　　名称：“应用程序”，

　　组件：{

　　}

　　}

　　/脚本

　　风格

　　#app {

　　字体系列：Avenir，Helvetica，Arial，无衬线；

　　-webkit-font-smoothing:抗锯齿；

　　-moz-osx-font-smoothing:灰度；

　　文本对齐：居中；

　　颜色：# 2c3e50

　　边距-顶部：60px

　　}

　　/风格

四、使用（比如跳转）

　　我们在需要路由的地方引入useRoute和useroute(相当于vue2中的$route和$router)。

　　脚本

　　从“vue路由器”导入{ useRoute，useRouter }

　　导出默认值{

　　setup () {

　　const route=useRoute()

　　const router=useRouter()

　　返回{}

　　},

　　}

　　示例：页面跳转

　　模板

　　H1我是test1/h1。

　　button @click=总测试2 总测试2/button

　　/模板

　　脚本

　　从“vue路由器”导入{ useRouter }

　　导出默认值{

　　setup () {

　　const router=useRouter()

　　const toTest2=(()={

　　router.push(。/test2’)

　　})

　　返回{

　　toTest2

　　}

　　},

　　}

　　/脚本

　　样式范围

　　/风格

总结

　　这就是这篇关于vue3使用vue-router的文章。关于vue3使用vue-router的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。