Vue?Router組合布局用法詳解
常用的布局
我們首先看一個(gè)我們常用的布局，左右布局。
app 頁(yè)面
我們通常寫(xiě)一個(gè)這樣的布局，思路是這樣的：
- 我們首先要寫(xiě)三個(gè)組件
meun.vue,header.vue,collect.vue - 在app添加引入單個(gè)組件
# 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 頁(yè)面
如果我們的about頁(yè)面，像這樣的，沒(méi)有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ī)操作，如果我們有些頁(yè)面不需要menu或者header頁(yè)面，我們都是要引入的，還有判斷是否顯示隱藏。
怎么才能不寫(xiě)這么多判斷，又能提高性能的同時(shí)，還能實(shí)現(xiàn)我們的效果呢？
- 使用異步組件動(dòng)態(tài)導(dǎo)入
defineAsyncComponent, 有需要組件去官網(wǎng)看下 - 使用
vue router命名視圖
命名視圖
我們這里使用命令視圖, 來(lái)實(shí)現(xiàn)我們想要的效果
有時(shí)候想同時(shí) (同級(jí)) 展示多個(gè)視圖，而不是嵌套展示，例如創(chuàng)建一個(gè)布局，有
sidebar(側(cè)導(dǎo)航) 和main(主內(nèi)容) 兩個(gè)視圖，這個(gè)時(shí)候命名視圖就派上用場(chǎng)了。你可以在界面中擁有多個(gè)單獨(dú)命名的視圖，而不是只有一個(gè)單獨(dú)的出口。如果router-view沒(méi)有設(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組合布局
項(xiàng)目目錄結(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視圖顯示
注意看下??：添加了兩個(gè)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'),
},
},
];
如果想顯示哪個(gè)視圖，就在相對(duì)應(yīng)的路由components添加相應(yīng)的視圖組件，這樣是不是方便了許多。
結(jié)論
- 不用在
app.vue添加判斷是否顯示隱藏header和menu組件 - 根據(jù)路由動(dòng)態(tài)顯示布局樣式
這只是提示多一種新的布局方式，方便我們開(kāi)發(fā)，當(dāng)然還是選擇合適自己的寫(xiě)法。
以上就是Vue Router組合布局用法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue Router組合布局的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
安裝vue-cli的前提是你已經(jīng)安裝了npm，安裝npm你可以直接下載node的安裝包進(jìn)行安裝。接下來(lái)通過(guò)本文給大家介紹安裝vue-cli的簡(jiǎn)易過(guò)程，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
vue 項(xiàng)目往往會(huì)搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。這篇文章主要介紹了vue 項(xiàng)目地址去掉 #的方法,需要的朋友可以參考下2018-10-10
vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue2和Vue3的nextTick實(shí)現(xiàn)原理
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細(xì)介紹了Vue2和Vue3的nextTick實(shí)現(xiàn)原理，感興趣的同學(xué)可以參考一下2023-04-04
在Vue中,有多種方式可以實(shí)現(xiàn)模糊查詢(xún),這篇文章主要介紹了5種vue中的常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
解決vue?change阻止默認(rèn)事件問(wèn)題
這篇文章主要介紹了vue?change阻止默認(rèn)事件問(wèn)題,使用事件 @click.stop.native.prevent 解決 (使用@click.stop 或者 @click.prevent都無(wú)效，直接報(bào)錯(cuò)還阻止不了事件)，需要的朋友可以參考下2022-01-01
詳解gantt甘特圖可拖拽、編輯(vue、react都可用?highcharts)
去年我遇到了一個(gè)甘特圖的需求，做了很多工作，最終還是不完美，今天使用一個(gè)新包，給大家重新學(xué)習(xí)下vue?甘特圖gantt的相關(guān)知識(shí)，感興趣的朋友一起看看吧2021-11-11
vue cli4.0項(xiàng)目引入typescript的方法
這篇文章主要介紹了vue cli4.0項(xiàng)目引入typescript的方法，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了解決vue跨域axios異步通信問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
Vue+axios+WebApi+NPOI導(dǎo)出Excel文件實(shí)例方法
在本篇文章里小編給大家整理關(guān)于Vue+axios+WebApi+NPOI導(dǎo)出Excel文件的知識(shí)點(diǎn)以及實(shí)例代碼，需要的朋友們參考下。2019-06-06