今天学习了简单的路由,和children 子路由的用法,大致可以总结为,假如我们在做一个带有底部导航的移动端项目可以这样写
routes: [
{
path: '/',
name: 'home',
redirect: '/index',
component: () => import(
'@/sgw/home'
),
// 首页底部导航路由注册
children: [
{
path: '/index',
name: 'index',
component: () => import(
'@/sgw/index'
)
},
{
path: '/active',
name: 'active',
component: () => import(
'@/sgw/active'
)
},
{
path: '/mall',
name: 'mall',
component: () => import(
'@/sgw/mall'
)
},
{
path: '/mine',
name: 'regmineed',
component: () => import(
'@/sgw/mine'
)
}
],
},
其中path为‘/’的为根目录,下面用了children 是因为在跳转路由一级页时,底部导航需要一直存在,所以可以采用路由挂载的方式,在‘/’这个页面中 加入<router-view></router-view>,底部导航也写在这个页。这样的话 在跳转时底部导航就会一直存在,
但是当我们跳转二级页时底部导航不需要了怎么办呢,这个时候需要注册路由的时候和上面的path同级创建。底部导航自然就不会在跳转路由的时候加载了
routes: [
{
path: '/',
name: 'home',
redirect: '/index',
component: () => import(
'@/sgw/home'
),
// 首页底部导航路由注册
children: [
{
path: '/index',
name: 'index',
component: () => import(
'@/sgw/index'
)
},
{
path: '/active',
name: 'active',
component: () => import(
'@/sgw/active'
)
},
{
path: '/mall',
name: 'mall',
component: () => import(
'@/sgw/mall'
)
},
{
path: '/mine',
name: 'regmineed',
component: () => import(
'@/sgw/mine'
)
}
],
},
// 我的二级页
{
path: '/mine/mine_reged',
name: 'reged',
component: () => import(
'@/sgw/mine_reged'
)
}
记录到这里,如果有大佬发现问题请一定要指正我,新手上路感恩。