如何使用vue路由器

突然遇到一个常见的问题，可以用v-if/v-show解决。有必要用vue-router来解决吗？比如常见的tab开关。当时我犹豫了，没必要滥用vue-router。什么时候用才合理？

先编码，通过两种方式达到效果

使用vue路由器

路由器

从“”导入Tab1。/components/tab/TabOne“从导入Tab2”。/components/tab/TabTwo“从导入Tab3”。/components/tab/TAB3“从导入Tab4”。/components/tab/tab four ' const routes=[{ path : '/tab 1 '，component: Tab1 }，{path: '/tab2 '，component: Tab2 }，{path: '/tab3 '，components : tab 3 }，{path:'/tab4 '，components 3360 tab 4 }，]construter=new vuerouter({ routes })。vue文件

div class=' tab ' router-link to='/tab 1 ' tab 1/router-link router-link to='/tab 2 ' tab 2/router-link router-link to='/tab 3 ' tab 3/router-link router-link to='/tab 4 ' tab 4/router-link router-view/router-view/div使用v-if/v-show。某视频剪辑软件

Div class=' tab ' button @ click=' handleTab(1)' tab 1/button @ click=' handleTab(2)' tab 2/button @ click=' handleTab(3)' tab 3/button @ click=' handleTab(4)' tab 4/button Div v v-if=' is show===1 ' Tab1//Div v v-if=' is show===2 ' Tab2//Div v-if=' is show===3 ' Tab3//Div-if=' is show===4 'isshow=v}}具有以下效果

路线在顶部，v-if在底部，目前看来效果差不多。然后从另一个角度考虑，页面结构。

vue路由器

控制显示

总结：

目前看来效果差别不大，代码量也没有减少。可以使用指数进行关联。在vue，建议暂时用数据驱动并做记录，以便继续研究边肖介绍的vue-router和v-if之间tab切换的上述思路。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！