vue router4,vuerouter4.0

　　在vue。j项目中使用某视频剪辑软件路由器，可以使用路由进行界面或路径跳转，下面这篇文章主要给大家介绍了关于Vue3使用路由VueRouter4的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下

路由

　　vue-router4保持了大部分应用程序接口不变，我们只关注变化部分即可。

安装

　　纱线添加vue-路由器@4

　　引入

　　内容交付网络

　　脚本src= https://cdn。bootcdn。net/Ajax/libs/vue-router/4。0 .6/vue-路由器。cjs。js /脚本

使用

　　router.js

　　从" vue路由器"导入{ createRouter，创建web历史}。

　　从导入主页100/观点/家。vue ；

　　常量路由=[

　　{路径："/",组件：首页}，

　　{ path:"/about "，component: ()=import( ./views/About.vue) }

　　];

　　const router=createRouter({

　　history: createWebHistory()，

　　路线

　　});

　　导出默认路由器；

　　main.js

　　从“vue”导入{创建应用}；

　　从导入应用程序. 1/app。vue ；

　　从导入路由器./路由器；

　　const App=create App(应用程序)；

　　app.use(路由器);

　　app。挂载( # app )；

　　App.vue

　　模板

　　氕你好App！/h1

　　p

　　路由器链接到=/转到主页/路由器链接

　　路由器-链接到=/about 转到关于/路由器-链接

　　/p

　　路由器视图/路由器视图

　　/模板

　　脚本

　　导出默认值{ };

　　/脚本

一个小提示

　　如果你的App.vue模板只有路由器视图/路由器视图时，可以吧路由器视图直接放入index.html中。

　　例如：

　　index.html

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8 /

　　link rel= icon href=/favicon。ico rel=外部无跟随/

　　meta name= viewport content= width=device-width，initial-scale=1.0 /

　　标题邀请应用程序/标题

　　/头

　　身体

　　div id=应用程序

　　路由器视图/路由器视图

　　/div

　　脚本类型=模块src=/src/main.js/script

　　/body

　　/html

　　之后主页。射流研究…内移除App.vue

　　主页。射流研究…

　　从“vue”导入{创建应用}；

　　//从导入应用程序. 1/app。vue ；

　　从导入路由器./路由器；

　　//const App=create App(App)；

　　const app=create app({ })；

　　app.use(路由器);

　　app。挂载( # app )；

　　完成！方便又好用

总结

　　到此这篇关于Vue3使用路由VueRouter4的文章就介绍到这了，更多相关Vue3使用路由VueRouter4内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

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