基于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 radio单选框,获取当前项(每一项)的value值操作

    vue radio单选框,获取当前项(每一项)的value值操作

    这篇文章主要介绍了vue radio单选框,获取当前项(每一项)的value值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue分页组件的封装方法

    Vue分页组件的封装方法

    这篇文章主要为大家详细介绍了Vue分页组件的封装方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue中Mixin的正确用法详解

    Vue中Mixin的正确用法详解

    众所周知,vue 的 mixins 是个非常灵活,但又很容易带来混乱的 API,Mixins 本该是一种强大的重用代码的手段,但使用之后往往带来更多的混乱,代码变得不易维护,本文就详细介绍Vue Mixin的正确用法,需要的朋友可以参考下
    2023-06-06
  • 手把手教学vue的路由权限问题

    手把手教学vue的路由权限问题

    这篇文章主要介绍了手把手教学vue的路由权限问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue数据双向绑定的实现方式讲解

    Vue数据双向绑定的实现方式讲解

    Vue数据双向绑定原理:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新
    2022-08-08
  • Vuex中getters和actions的使用补充说明

    Vuex中getters和actions的使用补充说明

    这篇文章主要介绍了在Vuex中关于getters和actions使用的补充作了简要说明,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2021-09-09
  • elementUI el-table二次封装的详细实例

    elementUI el-table二次封装的详细实例

    在项目中会多次使用表格展示数据,不对这个table进行二次封装成我们自己想要的,重复的代码量的工作会比较大,下面这篇文章主要给大家介绍了关于elementUI el-table二次封装的相关资料,需要的朋友可以参考下
    2023-03-03
  • Vue中的reactive函数操作代码

    Vue中的reactive函数操作代码

    这篇文章主要介绍了Vue中的reactive函数,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 解决vue props传Array/Object类型值,子组件报错的情况

    解决vue props传Array/Object类型值,子组件报错的情况

    这篇文章主要介绍了解决vue props传Array/Object类型值,子组件报错的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue结合el-dialog封装自己的confirm二次确认弹窗方式

    vue结合el-dialog封装自己的confirm二次确认弹窗方式

    这篇文章主要介绍了vue结合el-dialog封装自己的confirm二次确认弹窗方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-08-08

最新评论