Vue single page application how to add individual pages?
originally the project requirement is a single page, so we have made a common framework, including the sidebar and the top navigation.
later said that login registration should be integrated.
so I"d like to ask how to add a new page under the same domain name.
my current project structure is that the sidebar and the top navigation common part are written in app.vue
and then in app.vue use < router-view/ > with vue-router "s @ click=router.push ()
to switch pages that are partially refreshed.
now you need to add the login registration, which is a separate page that does not need a public part.
I don"t know what to do.
login registration can be .html or .vue, ask for help.
use nested routing
//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>
routing can be solved perfectly.
level:
app.vue is the top exit of the program (router-view): 1.login 2.home (main page)
the main page contains: 2.1sidebar 2.2 top navigation 2.3 right rendering area exit (router-view).
right render area exit: 2.3.x Page to be displayed
/ / basic routing
import Home from 'main page path'
import Login from 'login page path'
/ / Lazy load routing
const Welcome = resolve = > require (['Show page path'], 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'"/>
try this
for single-page applications (using vue-router), you should still follow the configuration, do not use the html suffix, or use the .vue single file component
.
