微客导航 » 文章资讯 » vue设置导航栏、侧边栏为公共页面的例子

vue设置导航栏、侧边栏为公共页面的例子

2023-08-10 01:19:04 192

首先，项目结构如下：

想要让导航栏、侧边栏变为公共页面，则要在App.vue页面中加入。假设已经有了Header.vue和Left.vue，这里就不贴出来了，App.vue代码如下：

此时运行会发现，所有的页面都被加上了这两个公共页面，而实际场景中，我们往往希望登录页是不需要导航栏和侧边栏的，那么就需要规避掉登录页。

这时，就可以采用keep-alive结合$route.meta来实现这个功能。keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。$route.meta则可以选择让需要的页面才展示。修改App.vue，如下：

index.js代码如下：

importVuefrom'vue'
importRouterfrom'vue-router'
importHelloWorldfrom'@/components/HelloWorld'

importLoginfrom'@/views/Login'
importindexfrom'@/views/index'
importversionListfrom'@/views/versionList'

Vue.use(Router)

exportdefaultnewRouter({
routes:[
{
path:'/',
name:'login',
component:Login,
meta:{
keepAlive:false
}
},
{
path:'/index',
name:'index',
component:index,
meta:{
keepAlive:true
}
},
{
path:'/versionList',
name:'versionList',
component:versionList,
meta:{
keepAlive:true
}
},
]
})

通过设置keepAlive的值就可以实现除了登录页不展示公共页面，在其他页面均展示的功能。

以上这篇vue设置导航栏、侧边栏为公共页面的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue设置导航栏、侧边栏为公共页面的例子

热门推荐

随机推荐