时间戳

首页 > 解决方案 > 在特定页面上渲染某些东西

vue.js - 在特定页面上渲染某些东西

问题描述

所以我得到了这个 base.vue 布局，我在这里有我的顶部导航和其余内容，我想知道是否可以在粘性 div 中添加输入类型搜索并仅在特定路线页面上呈现它？例如，我不想在每个页面上都有搜索栏，而只是在我进入用户视图时出现，我可以在其中过滤它们。

  .sticky.top-0.h-14.bg-white-200.shadow.px-8.flex.items-center
      input(type="search" placeholder="search)
    .container.max-w-full.mx-auto.p-8
      router-view

标签： vue.jsvuejs2vuejs3

解决方案

在您的脚本中添加一个计算属性，检查当前路由路径是否为/users：

computed:{
   isUsersPath(){
    return  this.$route.path==='/users'
  }
}

然后在模板中使用它：

 div(v-if="isUsersPath").sticky.top-0.h-14.bg-white-200.shadow.px-8.flex.items-center
      input(type="search" placeholder="search)
    .container.max-w-full.mx-auto.p-8
      router-view

推荐阅读