基于vue-cli 路由 实现类似tab切换效果（vue 2.0）
更新时间：2019年05月08日 10:01:30 作者：pearl007
这篇文章主要介绍了基于vue-cli 路由 实现类似tab切换效果（vue 2.0），非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
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，最终效果如图
8，更多关于路由说明，可以查看 http://router.vuejs.org/zh-cn/essentials/getting-started.html
总结
以上所述是小编给大家介绍的基于vue-cli 路由 实现类似tab切换效果（vue 2.0） ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了vue实现登录功能的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了解决vue-router路由拦截造成死循环问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Node.js+Vue脚手架环境搭建的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2020-03-03
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
下面小编就为大家分享一篇浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了vue3+ts出现白屏问题的原因与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要介绍了vue2.0如何动态绑定img的src属性(三元运算)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
在Vue中解决跨域问题有多种方法,今天通过本文给大家介绍几种比较常见的方法，对vue解决跨域问题感兴趣的朋友跟随小编一起看看吧2023-05-05
reactive是Vue3中提供实现响应式数据的方法，reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新，这篇文章主要介绍了vue3 reactive函数用法,需要的朋友可以参考下2022-11-11
Vue中transition单个节点过渡与transition-group列表过渡全过程
这篇文章主要介绍了Vue中transition单个节点过渡与transition-group列表过渡全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在我们使用Vue开发时,经常会用到CSS,下面这篇文章主要给大家介绍了关于Css中该如何使用Vue变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
最新评论