Vue?Router組合布局用法詳解

更新時間：2023年05月09日 14:18:32 作者：童心蟲鳴

今天我們用一種新的布局方式，使用路由視圖來實現(xiàn)布局樣式，本文將給大家介紹如何使用Vue?Router組合布局，文中有詳細(xì)的代碼示例供大家參考，感興趣的同學(xué)可以跟著小編一起學(xué)習(xí)

常用的布局

我們首先看一個我們常用的布局，左右布局。

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

我們可以根據(jù)路由判斷是否顯示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>

思考??

這是我們的常規(guī)操作，如果我們有些頁面不需要menu或者header頁面，我們都是要引入的，還有判斷是否顯示隱藏。

怎么才能不寫這么多判斷，又能提高性能的同時，還能實現(xiàn)我們的效果呢？

使用異步組件動態(tài)導(dǎo)入 defineAsyncComponent, 有需要組件去官網(wǎng)看下
使用 vue router命名視圖

命名視圖

我們這里使用命令視圖, 來實現(xiàn)我們想要的效果

有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創(chuàng)建一個布局，有 sidebar (側(cè)導(dǎo)航) 和 main (主內(nèi)容) 兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口。如果 router-view 沒有設(shè)置名字，那么默認(rèn)為 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組合布局

項目目錄結(jié)構(gòu)

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'),
     },
   },
 ];