vue-router命名檢視+路由巢狀
阿新 • • 發佈:2021-06-20
有這樣一個需求,頁面分為左右兩個區域,兩個區域的內容可能會各自變化,如果實現開啟頁面左右區域均有內容顯示,且支援單獨變化
*分析:
左右兩個要同時顯示,自然想到用使用命名檢視,在compents中將多個元件放在一起展示,但是左右兩側的router-view中所放的內容是會變化的,這該如何解決呢?在單個router-view的時候,切換router-view顯示的內容,切換path即可,那在多個router-view的時候,能否還能繼續使用切換path的方式來改變顯示的內容呢?沿著這個思路,還真把功能實現, 只是實現方式感覺很笨拙。
router
const routes = [ { path:"/", // MainPage用於承放頁面左右兩區域(用兩個命名檢視來佔位:left-container、right-container) component: MainPage, children: [ { path: "/", redirect: "/content" }, { path: "content", // components讓左右內容元件同時顯示 components: { "left-container": LeftContainer, "right-container": RightContainer, },// 子路由將左右兩側的元件組合起來顯示 children: [ { path: "/content", redirect: "/content/welcome_and_camera" }, { path: "welcome_and_camera", // 各自佔位 components: { "left-content": Welcome, "right-content": CameraVideo, }, }, { path:"facereco_and_camera", // 各自佔位 components: { "left-content": FaceRecoResult, "right-content": CameraVideo, }, }, { path: "welcome_andschool", // 各自佔位 components: { "left-content": Welcome, "right-content": School, }, }, ], }, ], },
MainPage.vue
<template> <div id="container"> <div id="left-panel"> <router-view name="left-container"></router-view> </div> <div id="right-panel"> <router-view name="right-container"></router-view> </div> </div> </template>
LeftContainer.vue
<template> <div> <h1>left</h1> <router-view name="left-content"></router-view> </div> </template>
RightContainer
<template> <div> <h1>right</h1> <router-view name="right-content"></router-view> </div> </template>
效果: