使用嵌套路由

//router.js
  routes: [
    {
      path: '/index',
      name: 'index',
      component: Index,
      children:[
          {
              path:'page1'
              name: 'page1',
              component: Page1,
          },
          {
              path:'page2'
              name: 'page2',
              component: Page2,
          },
      ]
    },
    {
        path: '/login',
        name: 'login',
        component: Login,
    }
  ]

//app.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>

//index.vue
<template>
  <div id="index">
    <navigator />
    <sidebar />
    <router-view />
  </div>
</template>

單頁應(yīng)用（用 vue-router）的話，還是走路由配置，不要走 html 后綴，還是走 .vue 單文件組件

路由就能完美解決啊。
層級:
app.vue是程序的頂級出口(router-view)：1.login 2.home(主頁面)
主頁面里面包含:2.1側(cè)邊欄 2.2頂部導(dǎo)航 2.3右側(cè)渲染區(qū)域出口(router-view)。
右側(cè)渲染區(qū)域出口:2.3.X 要展示的頁面

//基礎(chǔ)路由
import Home from '主頁面路徑'
import Login from '登錄頁面路徑'

//懶加載路由
const Welcome = resolve => require(['展示頁面路徑'], resolve)

routes:[

{
    path:'/login'
    name:'登錄頁面',
    component:Login,
},
{
    path:'/',
    name:'主頁',
    component:'Home',
    redirect: '/welcome',
    children: [
        { path: '/welcome', component: Welcome, name: '歡迎'}
    ]
}

]

<navigator v-if="$route.path!=='login'"/>
<sidebar v-if="$route.path!=='login'"/>

試試這樣