用VueRouter的命名视图控制布局
发布网友
发布时间：2024-10-04 00:13
共1个回答
热心网友
时间：2024-10-04 00:35
用Vue写页面时通常把一个页面作为一个组件，div写完布局后，把模块放到相应位置。
然后用VueRouter创建路由指向这个页面组件。
除了这个方法，还能借助VueRouter编写页面布局，那么如何实现呢？
一、分析页面以掘金几个页面为例，尝试命名视图控制页面布局
掘金首页
文章：别人怎样访问自己的localhost:8080?前端项目内网穿透
课程
直播
去掉信息干扰，用不同颜色表示模块，分析页面布局
从布局上看，页面是顶栏+内容的布局。根据不同URL，内容又分成了不同的列
首页：两列
文章页：三列
课程页：两列
直播页：一列
基本涵盖了博客类网站的布局类型
二、单视图布局?以内容最多的文章页为例
主要内容分三个区域，左侧边栏、主要内容和右侧边栏
用一个router-view布局时，代码是这样
主页面
//App.vue<template><router-view/></template>路由定义
//router/index.js{path:'/post/:id',component:()=>import('@/views/PostView.vue')},页面
//views/PostView.vue<template><div><PostLeftSidebar/><main>内容...</main><PostRightSidebar/></div></template><scriptsetup>importPostLeftSidebarfrom'@/components/PostLeftSidebar'importPostRightSidebarfrom'@/components/PostRightSidebar'</script>这样写没什么问题，完全可以实现效果。
但是页面始终与侧边栏始终耦合，下面通过命名视图把布局改到路由上，降低耦合。
三、命名视图布局?VueRouter命名视图官方文档
router-view允许定义名字，加上name属性
<router-viewname="left"/>页面中最多有3部分，所以把主页面改成三个router-view
//App.vue<template><router-viewname="LeftSidebar"/><router-view/><router-viewname="RightSidebar"/></template>router-view没有设置名字时，默认为default
路由除了component属性外还有components属性
components可以传对象，属性名与router-view的name一致时就能渲染到对应的router-view上
//router/index.js{path:'/post/:id',components:{default:()=>import('@/views/PostView.vue'),LeftSidebar:()=>import('@/components/PostLeftSidebar.vue'),RightSidebar:()=>import('@/components/PostRightSidebar.vue'),}},两者关联图如下
页面上删除侧边栏的代码
//views/PostView.vue<template><div><main>内容...</main></div></template>这样就完成了页面和侧边栏解耦
修改路由后可以灵活组合页面
四、保证布局不错位页面用tailwindcss编写
推荐一下tailblocks，它提供一些完全由tailwindcss构成的模块，譬如页头、页脚、列表等等
支持多种颜色风格和响应式布局，暗黑模式，可以方便快速的实现页面
地址在这里?https://tailblocks.cc
尽管用了3个router-view，但不是所有页面都需要显示3部分，所以要保证布局不会错位
在App.vue上增加一些控制
横排：使用flex布局
最大宽度1280px
始终居中
default路由宽度100%
//App.vue<template><TheHeader/><divclass="max-w-screen-xlmx-autoflex"><RouterViewname="LeftSidebar"/><RouterViewclass="w-full"/><RouterViewname="RightSidebar"/></div></template>LeftSidebar和RightSidebar的宽度让引用的组件自身控制
比如首页的路由
default:()=>import('@/views/HomeView')
RightSidebar:()=>import('@/components/TheBanner')
//components/TheBanner.vue<template><divclass="w-1/4">宽度25%</div></template>这样就实现了右边宽度固定，中间自适应布局，即使只有1个路由时不会偏移出错
五、页面截图5.1首页/home一共两个视图，默认和右侧边栏
{path:'/',name:'home',components:{default:()=>import('@/views/HomeView'),RightSidebar:()=>import('@/components/TheBanner')}}5.2文章/post一共三个视图，默认和左、右侧边栏
//router/index.js{path:'/post/:id',component:()=>import('@/views/PostView.vue')},05.3课程/course一共两个视图，默认和右侧边栏
//router/index.js{path:'/post/:id',component:()=>import('@/views/PostView.vue')},15.4直播/live只有一个视图，默认
//router/index.js{path:'/post/:id',component:()=>import('@/views/PostView.vue')},25.5src目录整体文件结构如下
//router/index.js{path:'/post/:id',component:()=>import('@/views/PostView.vue')},3最后?使用命名视图能降低耦合度，但也不适用所有场景
具体项目具体分析，合适的才是最好的。
原文：https://juejin.cn/post/7099060100639227918