TA貢獻1846條經驗 獲得超7個贊
路由就能完美解決啊。
層級:
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: '歡迎'}
]
}]
TA貢獻1848條經驗 獲得超6個贊
使用嵌套路由
//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>
舉報