关于点击左侧侧栏仅切换右侧内容部分

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于点击左侧侧栏仅切换右侧内容部分相关的知识,希望对你有一定的参考价值。

参考技术A 之前通过Element和遍历数据实现了一个侧栏,将这个侧栏注册为全局组件,最开始使用的是插槽的方法,每一个需要此页面的组件都要在外面包裹这个组件,要是有很多页面需要这个组件,那这样的实现方式就不是很便捷,并且点击跳转页面实现切换时页面会刷新,包括这个侧栏也会被刷新,视觉上也不舒服。

所以我把它包裹在pages下的index中,这样pages中所有文件都会有这个全局组件

并且将插槽修改为 router-view,通过router-link进行内容切换,至此就解决了全局组件使用繁杂和切换路由刷新的问题

但是这个全局组件也将登录页面包裹了,这是不对的,所以我监听当前页面的路由,判断是否为登录页面

如果不是,就可以渲染菜单,如果是就不渲染菜单,仅展示登录页内容

以上是关于关于点击左侧侧栏仅切换右侧内容部分的主要内容,如果未能解决你的问题,请参考以下文章

vue搭建后台管理页面(点击左侧导航,切换右侧内容)

谁能帮忙做一个窗体界面,wpf的~就按这个图的就好,点击左侧导航栏可以切换右侧内容的。初学者不了解

前端命名规范

web实现点击左侧导航,右侧加载不同的网页(这种布局多用于后台管理系统)

点击左侧跳到右侧

基于Angular2+的Tab页+侧边菜单比较完整的解决方案