Vue Router组合布局用法详解
更新时间：2023年05月09日 14:18:32 作者：童心虫鸣
今天我们用一种新的布局方式，使用路由视图来实现布局样式，本文将给大家介绍如何使用Vue Router组合布局，文中有详细的代码示例供大家参考，感兴趣的同学可以跟着小编一起学习
常用的布局
我们首先看一个我们常用的布局，左右布局。
app 页面
我们通常写一个这样的布局，思路是这样的：
- 我们首先要写三个组件
meun.vue,header.vue,collect.vue - 在app添加引入单个组件
# app.vue
<template>
<div class="contain flex p10 mt40 ml40">
<Menu class="menu width-200 flex-center mr10" />
<div class="flex1 flex-column">
<Header class="header mb10 p10 flex-center"></Header>
<router-view class="view-main"></router-view>
</div>
</div>
</template>
<script setup>
import Header from './views/home/header.vue';
import Menu from './views/home/menu.vue';
</script>about 页面
如果我们的about页面，像这样的，没有menu或者header
我们可以根据路由判断是否显示menu或者header组件
<template>
<div class="contain flex p10 mt40 ml40">
<Menu class="menu width-200 flex-center mr10" v-if="route.name !== 'about'" />
<div class="flex1 flex-column">
<Header class="header mb10 p10 flex-center"></Header>
<router-view class="view-main"></router-view>
</div>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import Header from './views/home/header.vue';
import Menu from './views/home/menu.vue';
const route = useRoute();
</script>思考🤔
这是我们的常规操作，如果我们有些页面不需要menu或者header页面，我们都是要引入的，还有判断是否显示隐藏。
怎么才能不写这么多判断，又能提高性能的同时，还能实现我们的效果呢？
- 使用异步组件动态导入
defineAsyncComponent, 有需要组件去官网看下 - 使用
vue router命名视图
命名视图
我们这里使用命令视图, 来实现我们想要的效果
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有
sidebar(侧导航) 和main(主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default。
<router-view class="view left-sidebar" name="LeftSidebar"></router-view> <router-view class="view main-content"></router-view> <router-view class="view right-sidebar" name="RightSidebar"></router-view>
Router组合布局
项目目录结构
router-demo ├── src │ ├── App.vue │ ├── assets │ │ └── vue.svg │ ├── main.js │ ├── router │ │ └── index.js │ ├── store │ │ └── index.js │ ├── utils │ │ └── request.js │ └── views │ ├── about │ │ ├── api │ │ │ └── index.js │ │ ├── index.vue │ │ ├── router │ │ │ └── index.js │ │ └── store │ │ └── index.js │ ├── home │ │ ├── header.vue │ │ └── menu.vue │ └── main │ ├── api │ │ └── index.js │ ├── index.vue │ ├── router │ │ └── index.js │ └── store │ └── index.js └── vite.config.js
- 修改
app.vue视图显示
注意看下📢：添加了两个router-view命名视图
<template>
<div class="contain flex p10 mt40 ml40">
<router-view class="menu width-200 flex-center mr10" name="Menu" />
<div class="flex1 flex-column">
<router-view class="header mb10 p10 flex-center" name="Headers" />
<router-view class="view-main"></router-view>
</div>
</div>
</template>
<script setup>
</script>- 修改
main文件夹中的route.js
这里 注意📢：component修改components
// mian/router/index.js
export default [
{
path: '/main',
name: 'main',
components: {
default: () => import('../index.vue'),
Headers: () => import('@/views/home/header.vue'),
Menu: () => import('@/views/home/menu.vue'),
},
},
];
- 修改
about文件夹的router.js
// about/router/index.js
export default [
{
path: '/about',
name: 'about',
components: {
default: () => import('../index.vue'),
Headers: () => import('@/views/home/header.vue'),
},
},
];
如果想显示哪个视图，就在相对应的路由components添加相应的视图组件，这样是不是方便了许多。
结论
- 不用在
app.vue添加判断是否显示隐藏header和menu组件 - 根据路由动态显示布局样式
这只是提示多一种新的布局方式，方便我们开发，当然还是选择合适自己的写法。
以上就是Vue Router组合布局用法详解的详细内容，更多关于Vue Router组合布局的资料请关注脚本之家其它相关文章！
相关文章
工作中vue表单使用的最多的莫过于input、textarea、select等，原生js的基础上vue通过双向数据绑定等，实现了自己独有的一套指令，这是react中没有的部分，也算是vue的一大特色2022-09-09
今天小编就为大家分享一篇Vue 应用中结合vux使用微信 jssdk的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue项目中解决 IOS + H5 滑动边界橡皮筋弹性效果(解决思路)
最近遇到一个问题，我们在企业微信中的 H5 项目中需要用到table表格（支持懒加载 上划加载数据），但是他们在锁头、锁列的情况下，依旧会出现边界橡皮筋效果，这篇文章主要介绍了vue项目中解决 IOS + H5 滑动边界橡皮筋弹性效果,需要的朋友可以参考下2023-02-02
element-ui vue input输入框自动获取焦点聚焦方式
这篇文章主要介绍了element-ui vue input输入框自动获取焦点聚焦方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
在vue-cli脚手架中配置一个vue-router前端路由
这篇文章主要给大家介绍了在vue-cli脚手架中配置一个vue-router前端路由的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
这篇文章主要介绍了浅析vue中的组件传值，文章基于vue的相关资料展开对主题的详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
这篇文章主要介绍了vue.js 实现点击div标签时改变样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文主要介绍了vue项目中如何配置env环境的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了Vue路由的模块自动化与统一加载实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
vue-element-admin开发教程(v4.0.0之后)
由于vue-element-admin的架构再4.0.0版本后做了重构，整体结构上和之前的还是很相似的，但是也有些变化，本文就介绍vue-element-admin开发教程(v4.0.0之后)，感兴趣的可以了解一下2022-04-04
最新评论