1.更改main.js

2.在App.vue中，写两个路由器链接，分别跳转到“Home”和“About”(Home和About分别是两个组件)

-为什么使用路由器链接/路由器链接？请搬到http://router.vuejs.org/zh-cn/api/router-link.html

-路由器-查看路由视图(必需)

- css可以使用外部样式

3.app.vue的风格如图。

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

4.创建一个新的主页组件并编写内容，关于它也是如此。

5.开始编写路由文件，创建一个新的router.js，如图所示。

6.创建一个新的routes.js，如图所示。(其实routes.js中的内容可以直接写在router.js中，而不是routes中的内容。为了结构清晰，分开管理更容易)

7.最终效果如图所示

8.有关路由的更多信息，您可以查看http://router.vuejs.org/zh-cn/essentials/getting-started.html

摘要

以上就是基于边肖推出的vue-cli路由实现tab切换效果(vue 2.0)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！