目录常用的布局app 页面about 页面思考🤔命名视图Router组合布局结论常用的布局 我们首先看一个我们常用的布局,左右布局。 app 页面 我们通常写一个这样的布局,思路是
我们首先看一个我们常用的布局,左右布局。
我们通常写一个这样的布局,思路是这样的:
meun.Vue
, header.vue
, collect.vue
# 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
页面,像这样的,没有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-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组合布局的资料请关注编程网其它相关文章!
--结束END--
本文标题: Vue Router组合布局用法详解
本文链接: https://www.lsjlt.com/news/213357.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0