vue-router命名视图+路由嵌套
有这样一个需求,页面分为左右两个区域,两个区域的内容可能会各自变化,如果实现打开页面左右区域均有内容显示,且支持单独变化
*分析:
左右两个要同时显示,自然想到用使用命名视图,在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>
效果: