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

Question

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

Answer 1

使用嵌套路由

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

Answer 2

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

试试这样