vue项目怎么建一个布局，让其中间部分可替换，上边固定不动？

Question

我现在这样写的，之后不知道怎么用?其它页面都要这个模板，登录页不用，怎么写？

<template>
    <div>
        <h2>header</h2>
        <div class="container">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {}
</script>
<style lang="scss" scoped>
</style>

Answer 1

要引入vue-router
然后配置路由项，类似于下面这样

// 这个layout就是你上面定义的布局
import Layout from '@/layout'

const router = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/else',
    component: Layout,
    children: [{
      path: 'one',
      component: () => import('@/views/one')
    }]
  },
]

当你调用/else/one 页面时，会先使用 你的布局 在使用 one 组件的布局这样就行了