Vue单页面应用怎么加个别的页面?

Question

本来项目需求是单页面，就做了公共的框架，包括侧边栏和顶部导航。后来又说要把登录注册集成进去。所以想问一下，怎么在同一个域名下加一个新页面。我现在的项目结构是 侧边栏和顶部导航公共部分写在app.vue里然后在app.vue里用<router-view/> 配合vue-router的@click=router.push()进行局部刷新的页面切换。现在需要把登录注册加进去，是单独的页面不需要公共部分。不知道怎么做了。登录注册可以是.html的也可以是.vue的，寻求一下帮助。

Answer 1

路由就能完美解决啊。
层级:
app.vue是程序的顶级出口(router-view)：1.login 2.home(主页面)
主页面里面包含:2.1侧边栏 2.2顶部导航 2.3右侧渲染区域出口(router-view)。
右侧渲染区域出口:2.3.X 要展示的页面

//基础路由
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: '欢迎'}
    ]
}

]

Answer 2

使用嵌套路由

//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>