第三十八篇:vue3路由
2021/10/25 6:09:48
本文主要是介绍第三十八篇:vue3路由,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
好家伙,水博客怎么说
1.0.安装:简简单单的淘宝镜像安装
装一下淘宝镜像(一般都有)
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后装router
cnpm install vue-router@4 //vue3用版本router4
2.路由语法
//写在router.js中src目录下 inport {createRouter} from "vue-router"; //方法createRouter:创建一个路由 const router = createRouter(); //创建路由 export dafault router; //暴露router
3.改一下
// main.js下 creatApp(App).mount('#app') 把他拆开(就多加一个变量) const app = creatApp(App) mount('#app')
4.引用router(语法大概和vue2差不多)
//还是在main.js下 import router from "./router.js" const app = creatApp(App) app.use(router); mount('#app')
5.开始设置路由
// 在router.js中src目录下 inport { createRouter,createWebHashHistory} from "vue-router"; // improt <组件名> from "./路径1" improt <组件名> from "./路径2" const router = createRouter({ routes:[{ path:"/", component:<组件名> }, { path:"/123", component:<组件名> }] }); //创建路由 export dafault router; //暴露router
6.app.vue中
//依旧是那两个:1.点击跳转路径, 2.组件视图 <router-link to="/123">首页</router-link> <router-view></router-view>
然后就能点击跳转了,
就这么多了
这篇关于第三十八篇:vue3路由的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南