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

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

1,更主要改。js

2,在应用程序。vue中,写入两个跳转链接(router-link),分别跳转到“家”“关于”(家,即分别是两个组件)

——其中,为什么要使用& lt; router-link> & lt;/router-link>请移步:http://router.vuejs.org/zh-cn/api/router-link.html

——router-view路由视图(必须)

——css可以使用外部样式

3, app.vue的样式如图。

- - - - -。router-link-active这个类,是当路由路径指向当前组件时自动生成的,可以在此处设置样式(选中状态)

4,新建家组件,并写入内容,对同理。

5,开始写路由文件,新建一个路由器。js,如图。

6,新建一个routes.js,如图。(实际上,routers.js中的内容,可以直接写在路由器。js中,代替路线中的内容即可。而为了结构清晰,分开写更便于管理)

7,最终效果如图