vue-router 页面布局
程序员文章站
2023-12-25 22:08:09
在单页面应用程序(SPA)中,有些页面的布局结构是上下两块是固定,中间内容是变化的。这时在入口处固定上下部分就可以很好的解决这一问题。有少部分页面没有上下部分或不需要(如:用户注册、登陆页面),针对这一情况怎么解决 兼容这两种情况解决方案: App.vue 在入口处单个路由输出 Frame.vue ......
在单页面应用程序(spa)中,有些页面的布局结构是上下两块是固定,中间内容是变化的。这时在入口处固定上下部分就可以很好的解决这一问题。有少部分页面没有上下部分或不需要(如:用户注册、登陆页面),针对这一情况怎么解决
兼容这两种情况解决方案:
app.vue
在入口处单个路由输出
<template> <router-view></router-view> </template>
frame.vue
在做一个固定结构布局
<template> <div id="app"> <header class="header"> //.... 头固定 </header> <div class="main"> <router-view></router-view> </div> <footer class="footer"> //.... 尾固定 </footer> </div> </template>
router.js
在需要采用固定布局结构的地方加载frame布局文件,然后做一个嵌套路由。
子路由和父路由相同的情况下可实现默认加载
routes:
[ { path: "/login", name: "login", component: () => import("./views/login.vue") }, { path: "/register", name: "register", component: () => import("./views/register.vue") }, { path:"/", component:frame, children:[ { path:"/", // 默认加载 子路径与父路径相同的情况下会自动加载 name:"index", component: index }, { path:"/list", name:"list", component: () => import("./views/list.vue") } ], } ]