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

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

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

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

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

阅读 4.9k
4 个回答

使用嵌套路由

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

路由就能完美解决啊。
层级:
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: '欢迎'}
    ]
}

]

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

试试这样

单页应用(用 vue-router)的话,还是走路由配置,不要走 html 后缀,还是走 .vue 单文件组件

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题