项目需求:所有的页面都有顶部导航条和左侧菜单栏,首页除外
方法一:
App.vue写上公用的导航条和菜单栏,所有的页面(包括首页)都注册到App.vue中,在routerview中显示,这会导致首页也会有左侧的菜单栏和导航条,通过使用vue-router中的元信息meta
router:
{
path:'/pages/home',
component:home,
meta:{
showMenu:true
}
},
App.vue:
<nav v-if="!$route.meta.showMenu" class="nav-bar">
<nav-menu :menu-list="menuArr"></nav-menu>
</nav>
//左侧菜单亦然
这种方法虽然可以完成需求,但会出现一个小问题:当网速一般的时候主页会出现导航条和左侧菜单栏闪一下再消失的情况,因为毕竟是通过v-if判断,会出现一定的计算延时。
采用方法二就能确保不会出现这个问题。
方法二:
App.vue里置空如下:
<template>
<div id="app">
<router-view />
</div>
</template>
<style lang="scss">
</style>
让没有导航条和菜单栏的主页单独作为一个文件,有导航条和菜单栏的其他页面路由嵌套children也作为一个文件
router:
routes: [
{
path:'',
component:home
},
{
path:'/pages',
redirect:'/pages/CopyrightCenter'
},
{
path: "/pages",
component:pages,
children:[
{
path: 'CopyrightCenter',
component: CopyrightCenter,
children: [
{
path: '',
name: 'CopyrightCenter',
component: cmain
},
{
path: 'search',
name: 'search',
component: search
}
]
},
{
path: 'CopyrightCenter/ImgDetail',
component: ImgDetail,
children: [
{
path: '',
name: 'ImgDetail',
component: imginfo
},
{
path: 'imgdes',
component: imgdes
}
]
},
]
这样访问首页的时候就不会出现上述问题,至此问题解决。