脚本宝典收集整理的这篇文章主要介绍了第三十八篇: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路由全部内容，希望文章能够帮你解决第三十八篇:vue3路由所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。