【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路由最基础的用法。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • PS:转载请注明出处作者: TigerChain地址https://www.jianshu.com/p/9a7d7...
    TigerChain阅读 64,149评论 9 218
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 4,863评论 0 1
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    你猜_3214阅读 13,821评论 0 118
  • 独自走在熟悉的小巷 墙上的花儿却好像在迎接客人一样 踏在长满青苔的石板上 石板啊 你发出的声响是在告诉花儿这就是我...
    断剑残烛阅读 2,361评论 0 1
  • 1.你不逼自己一把,你不知道自己能做到什么地步 创业时代郭鑫年终于拿到了洛菲斯的投资,上线一天的下载量比提前他们...
    风清社阅读 3,793评论 0 0