网页前端后台技巧(CSS+HTML)WebJavaScript 进阶营

【Vue-cli3】路由基础

2019-04-03  本文已影响26人  德育处主任
微信订阅号: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路由最基础的用法。

上一篇下一篇

猜你喜欢

热点阅读