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>思考??
這是我們的常規(guī)操作，如果我們有些頁面不需要menu或者header頁面，我們都是要引入的，還有判斷是否顯示隱藏。
怎么才能不寫這么多判斷，又能提高性能的同時，還能實現我們的效果呢？
- 使用異步組件動態(tài)導入
defineAsyncComponent, 有需要組件去官網看下 - 使用
vue router命名視圖
命名視圖
我們這里使用命令視圖, 來實現我們想要的效果
有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創(chuàng)建一個布局，有
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組件 - 根據路由動態(tài)顯示布局樣式
這只是提示多一種新的布局方式，方便我們開發(fā)，當然還是選擇合適自己的寫法。
以上就是Vue Router組合布局用法詳解的詳細內容，更多關于Vue Router組合布局的資料請關注腳本之家其它相關文章！
相關文章
工作中vue表單使用的最多的莫過于input、textarea、select等，原生js的基礎上vue通過雙向數據綁定等，實現了自己獨有的一套指令，這是react中沒有的部分，也算是vue的一大特色2022-09-09
今天小編就為大家分享一篇Vue 應用中結合vux使用微信 jssdk的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue項目中解決 IOS + H5 滑動邊界橡皮筋彈性效果(解決思路)
最近遇到一個問題，我們在企業(yè)微信中的 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環(huán)境的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了Vue路由的模塊自動化與統(tǒng)一加載實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
vue-element-admin開發(fā)教程(v4.0.0之后)
由于vue-element-admin的架構再4.0.0版本后做了重構，整體結構上和之前的還是很相似的，但是也有些變化，本文就介紹vue-element-admin開發(fā)教程(v4.0.0之后)，感興趣的可以了解一下2022-04-04