vue,vue-router如何做，实现切换标签，公用组件显示对应不同的内容

Question

通过切换上边4个标签，控制左侧边栏显示对应的内容，求提供思路，是通过路由还是参数更好？

Answer 1

如果你左侧的导航是动态渲染的，可以监听标签的点击事件，用 vue-router 的 addRoutes 动态渲染左侧导航。
这个需要在 vue-router 的守卫(router.beforeEach((to, from ,next))写，判断当前标签->获取对应左侧路由配置->将左侧路由添加到vue-router

Answer 2

2种思路。
第一种是通过路由切换页面，即中间需要变化的模块为子路由，通过点击上面的模块来切换不同的路由，显示不同的页面；
第二种就是通过v-show或者v-if控制显示不同的界面。
两种方式，各有优劣，路由方式是刷新页面后内容依然能够存在，而参数方式刷新后如果不采用缓存方式缓存数据的话，页面会回到初始化的状态，建议你如果页面逻辑比较多，比较复杂，采用路由方式，如果只是显示几个界面，没什么交互逻辑的话，完全可以采用参数形式。
不过看你这个应该是后台管理系统，向后维护考虑，建议你采用路由方式。

Answer 3

vue-router有个命名视图，可以看一下！ vue有<slot>具名槽，应该也可以实现你想要的功能，不行话直接用jq直接操作Dom控制。

Answer 4

看下动态组件能解决不