欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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") } ], } ]

 

上一篇:

下一篇:

推荐阅读