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

Question

本来项目需求是单页面，就做了公共的框架，包括侧边栏和顶部导航。
后来又说要把登录注册集成进去。
所以想问一下，怎么在同一个域名下加一个新页面。

我现在的项目结构是 侧边栏和顶部导航公共部分写在app.vue里
然后在app.vue里用<router-view/> 配合vue-router的@click=router.push()
进行局部刷新的页面切换。

现在需要把登录注册加进去，是单独的页面不需要公共部分。
不知道怎么做了。

登录注册可以是.html的也可以是.vue的，寻求一下帮助。

Answer 1

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

Answer 2

<navigator&nbsp;v-if="$route.path!=='login'"/> <sidebar&nbsp;v-if="$route.path!=='login'"/>试试这样