vue公共头部、底部可控制显示隐藏的方法

本文介绍如何在Vue项目中实现公共头部和底部的显示与隐藏。通过在App.vue引入公共组件并设置v-if,配合路由事件和特定页面的生命周期钩子函数,可以灵活控制这些组件的可见性。

vue公共头部、底部可控制显示隐藏的方法

app.vue
找到<router-view/>路由插入点一般在App.vue页面

/* App.vue的template */
<template>
	<div class="home">
		<PCheader v-if="header_show"></PCheader>
		<router-view v-on:public_header="public_header" v-on:public_footer="public_footer"></router-view>
		<PCfoot v-if="footer_show"></PCfoot>
	</div>
</template>

App.vue的template
在App.vue中引入公共头部和底部,设置v-if 默认设置显示,为router-view设置v-on事件

/* App.vue的script */
<script>
import PCfoot from '@/views/Public/PCfoot';//底部
import PCheader from '@/views/Public/PCheader';//头部

export default {
	name: 'PortalHome',
	data(){
		return{
			header_show:true,
			footer_show:true,
		};
	},
	components: {
		PCheader,
		PCfoot
	},
	methods:{
	      //是否显示头部
	      public_header:function (bool) {
	        this.header_show = bool;
	      },
	      //是否显示底部
	      public_footer:function (bool) {
	          this.footer_show = bool;
	      }
	  },
};
</script>

App.vue的script
App.vue完整代码

/* App.vue页面完整代码 */
<template>
	<div class="home">
		<PCheader v-if="header_show"></PCheader>
		<router-view v-on:public_header="public_header" v-on:public_footer="public_footer"></router-view>
		<PCfoot v-if="footer_show"></PCfoot>
	</div>
</template>

<script>
import PCfoot from '@/views/Public/PCfoot';//底部
import PCheader from '@/views/Public/PCheader';//头部

export default {
	name: 'PortalHome',
	data(){
		return{
			header_show:true,
			footer_show:true,
		};
	},
	components: {
		PCheader,
		PCfoot
	},
	methods:{
	      //是否显示头部
	      public_header:function (bool) {
	        this.header_show = bool;
	      },
	      //是否显示底部
	      public_footer:function (bool) {
	          this.footer_show = bool;
	      }
	  },
};
</script>

在不需要公共头部的页面添加created生命周期函数,设置公共头部的属性为false
设置头部为false

created() {
			this.$emit('public_header', false);
			this.$emit('public_footer', false);
		},
### 修改 App.vue 文件以解决页面效果无法显示的问题 在 Vue 单页应用程序中,`App.vue` 是整个项目的根组件,默认会应用于所有的路由页面。然而,在某些特殊场景下(如登录页面),我们可能不需要展示公共组件(例如导航栏)。为了实现这一目标,可以通过条件渲染的方式动态决定是否加载公共组件。 --- #### 动态切换布局的解决方案 ##### 方法一:基于路由名称判断 可以在 `App.vue` 中通过 `$route.name` 判断当前路由是否属于需要隐藏公共组件的情况,并据此有条件地渲染公共组件。 ```vue <template> <div id="app"> <!-- 条件渲染 --> <header v-if="!isSpecialRoute"> <nav>通用导航栏</nav> </header> <!-- 主体内容区域 --> <router-view></router-view> <!-- 底部版权信息 --> <footer v-if="!isSpecialRoute"> <p>© 2023 版权声明</p> </footer> </div> </template> <script> export default { computed: { isSpecialRoute() { // 定义哪些路由不需要公共组件 const specialRoutes = ['Login', 'Register']; return specialRoutes.includes(this.$route.name); }, }, }; </script> <style scoped> /* 样式可以根据实际需求自定义 */ </style> ``` 此方法利用计算属性 `isSpecialRoute` 检测当前路由名是否位于预设的特殊路由数组中[^1]。如果是,则跳过公共组件的渲染。 --- ##### 方法二:使用嵌套路由与独立布局 另一种更灵活的方法是创建不同的布局组件(例如 `DefaultLayout.vue` 和 `BlankLayout.vue`),并通过嵌套路由指定不同页面使用的布局。 ###### 创建布局组件 ```vue <!-- DefaultLayout.vue --> <template> <div> <header><nav>通用导航栏</nav></header> <main><slot /></main> <footer><p>© 2023 版权声明</p></footer> </div> </template> ``` ```vue <!-- BlankLayout.vue --> <template> <div> <main><slot /></main> </div> </template> ``` ###### 配置路由规则 在路由配置中为每条路由分配相应的布局: ```javascript import DefaultLayout from '@/layouts/DefaultLayout.vue'; import BlankLayout from '@/layouts/BlankLayout.vue'; const routes = [ { path: '/', component: DefaultLayout, children: [ { path: '', name: 'Home', component: HomeView }, { path: 'about', name: 'About', component: AboutView }, ], }, { path: '/login', component: BlankLayout, children: [{ path: '', name: 'Login', component: LoginView }], }, ]; ``` 这种方式更加模块化,适合复杂的应用架构设计[^3]。 --- #### 常见问题排查 如果按照上述方式修改后仍然存在问题,可以尝试以下步骤进行排查: 1. **检查路由注册**:确保所有路由都已正确导入并挂载到路由器实例中。 2. **验证组件引入**:确认所需子组件已在父组件中正确声明和注册[^2]。 3. **观察生命周期顺序**:部分逻辑依赖于特定阶段触发,需留意各组件间生命周期钩子的实际执行时机[^3]。 4. **审查 CSS 样式冲突**:有时即使结构无误也可能因样式覆盖而导致视觉偏差。 --- ### 总结 通过条件渲染或定制化布局策略能够有效应对单页应用中个别页面无需共享头部尾部的需求。推荐根据项目规模选择合适的技术路线实施改造。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值