【Vue-cli3】路由基础

微信订阅号：Rabbit_svip

最好先看看【Vue】路由 - 基础使用方法

1、创建项目
根据【Vue-cli 3.x】创建vue项目 的方法，创建一个带router的项目。

2、运行项目
通过命令 npm run serve 运行项目。

微信订阅号：Rabbit_svip

上图是项目运行后的效果。

---

下面红框部分是主要关注的文件

微信订阅号：Rabbit_svip

【main.js】

微信订阅号：Rabbit_svip

【router.js】

微信订阅号：Rabbit_svip

【App.vue】

App.vue是根组件

微信订阅号：Rabbit_svip

About.vue和Home.vue两个组件，就是要展示的页面部分。

如果需要添加其他页面，可以在views或者components文件夹里面，创建新的组件。

然后在router.js里配置相应的路由规则。

最后在App.vue里设置好导航就行了。

以上就是Vue路由最基础的用法。