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:[{&nbsp;&nbsp;&nbsp;&nbsp;path:'/login' &nbsp;&nbsp;&nbsp;&nbsp;name:'登录页面',&nbsp;&nbsp;&nbsp;&nbsp;component:Login, }, {&nbsp;&nbsp;&nbsp;&nbsp;path:'/',&nbsp;&nbsp;&nbsp;&nbsp;name:'主页',&nbsp;&nbsp;&nbsp;&nbsp;component:'Home',&nbsp;&nbsp;&nbsp;&nbsp;redirect:&nbsp;'/welcome',&nbsp;&nbsp;&nbsp;&nbsp;children:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;path:&nbsp;'/welcome',&nbsp;component:&nbsp;Welcome,&nbsp;name:&nbsp;'欢迎'} &nbsp;&nbsp;&nbsp;&nbsp;] }]

Answer 2

使用嵌套路由//router.js&nbsp; routes: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; path: '/index',&nbsp; &nbsp; &nbsp; name: 'index',&nbsp; &nbsp; &nbsp; component: Index,&nbsp; &nbsp; &nbsp; children:[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path:'page1'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'page1',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component: Page1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path:'page2'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'page2',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component: Page2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; path: '/login',&nbsp; &nbsp; &nbsp; &nbsp; name: 'login',&nbsp; &nbsp; &nbsp; &nbsp; component: Login,&nbsp; &nbsp; }&nbsp; ]//app.vue<template>&nbsp; <div id="app">&nbsp; &nbsp; <router-view />&nbsp; </div></template>//index.vue<template>&nbsp; <div id="index">&nbsp; &nbsp; <navigator />&nbsp; &nbsp; <sidebar />&nbsp; &nbsp; <router-view />&nbsp; </div></template>