比如非路由Footer组件在路由Home、Search显示,在登陆,注册隐藏

本文介绍了如何使用Vue通过配置路由的meta字段,结合App.vue中的Footer组件,实现基于路由条件的组件显示。通过布尔值控制`v-show`,使得`/home`和`/search`路由下`Footer`显示,而`/login`和`/register`则隐藏。
摘要由CSDN通过智能技术生成

方法1

<Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>

方法2:路由元信息

找到路由文件router/index.js,配置meta字段

配置路由的时候,可以给路由添加元信息【meta】,路由需要配置对象,他的key不能乱写

  //配置路由
    routes:[
    {
    path:"/home",
    component:Home,
    meta:{show:true}//为什么适用布尔值,因为v-show需要的就是布尔值
    },
     {
    path:"/search",
    component:Search,
    meta:{show:true}
    },
     {
    path:"/login",
    component:Login,
    meta:{show:false}
    },
     {
    path:"/register",
    component:Register,
    meta:{show:false}
    },

找到App.vue的Footer组件名

<Footer v-show="$route.meta.show"></Footer>//如果你当前的路由中当中,show这个值为真就显示,否则不显示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值