基于vue-cli路由怎么实现类似tab切换效果

这篇文章主要介绍基于vue-cli路由怎么实现类似tab切换效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

目前成都创新互联已为1000+的企业提供了网站建设、域名、网络空间、成都网站托管、企业网站设计、济源网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

1，更改main.js

2，在App.vue中，写入两个跳转链接（router-link），分别跳转到“home”“About” （home、About即分别是两个组件）

----其中，为什么要使用<router-link></router-link>, 请移步：http://router.vuejs.org/zh-cn/api/router-link.html

----router-view路由视图（必须）

----css可以使用外部样式

3，app.vue的样式如图。

----.router-link-active这个class，是当路由path指向当前组件时自动生成的，可以在此处设置样式（选中状态）

4，新建Home组件，并写入内容，About同理。

5，开始写路由文件，新建一个router.js，如图。

6，新建一个routes.js，如图。（实际上，routers.js中的内容，可以直接写在router.js中，代替routes中的内容即可。而为了结构清晰，分开写更便于管理）

7，最终效果如图

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

以上是“基于vue-cli路由怎么实现类似tab切换效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

网站标题：基于vue-cli路由怎么实现类似tab切换效果
本文地址：https://www.cdcxhl.com/article26/ghpcjg.html

成都网站建设公司_创新互联，为您提供用户体验、电子商务、企业建站、商城网站、Google、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联