【Vue-cli3】路由基础
2019-04-03 本文已影响26人
德育处主任
微信订阅号:Rabbit_svip
微信订阅号:Rabbit_svip
微信订阅号:Rabbit_svip
最好先看看【Vue】路由 - 基础使用方法
1、创建项目
根据【Vue-cli 3.x】创建vue项目 的方法,创建一个带router的项目。
2、运行项目
通过命令 npm run serve
运行项目。
上图是项目运行后的效果。
下面红框部分是主要关注的文件
微信订阅号:Rabbit_svip
【main.js】
微信订阅号:Rabbit_svip
【router.js】
微信订阅号:Rabbit_svip【App.vue】
App.vue是根组件
微信订阅号:Rabbit_svipAbout.vue和Home.vue两个组件,就是要展示的页面部分。
如果需要添加其他页面,可以在views或者components文件夹里面,创建新的组件。
然后在router.js里配置相应的路由规则。
最后在App.vue里设置好导航就行了。
以上就是Vue路由最基础的用法。