Vue fixed head position, but now to do a separate landing page, solve?

as shown in the figure: the landing page needs to be displayed separately, and now it is all in the middle of the beginning and the end

=

clipboard.png

router.js

import Vue from "vue"
import Router from "vue-router"
import Index from "../components/index"
import Classify from "../components/classify"
import Cart from "../components/cart"
import Center from "../components/center"
import Login from "../components/welcome"
Vue.use(Router)

export default new Router({
    mode: "history",
  routes: [
    {
      path: "/welcome",
      component: Login
    },
    {
      path: "/",
      component: Index
    },
    {
      path: "/classify",
      component: Classify
    },
    {
      path: "/cart",
      component: Cart
    },
    {
      path: "/center",
      component: Center
    }
  ]
})

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../components/index'
import Classify from '../components/classify'
import Cart from '../components/cart'
import Center from '../components/center'
import Login from '../components/welcome'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      component: Login // 
    },
    {
      path: '',
      component: App, //  App.vue
      children: [
        {
          path: '/welcome',
          component: Login
        },
        {
          path: '/',
          component: Index
        },
        {
          path: '/classify',
          component: Classify
        },
        {
          path: '/cart',
          component: Cart
        },
        {
          path: '/center',
          component: Center
        }
      ]
    }
  ]
})
Replace

App.vue with

<template>
  <router-view />
</template>

reference: https://router.vuejs.org/zh-c.


Don't SPA,login stand out to make a page


you can judge the current route and use vuex to control the display of the head and tail

.
Menu