Vue移动端tabBar只在特定页面显示

关于这个tabBar只在你下方规定的几个特定路由中显示，其他页面不显示，我用了两种办法。

直接上代码

不怎么好的示范：

  watch: {

  "$route.path": function(newVal) {

    if (newVal === "/home") {

      this.tabBar = true;

    } else if(newVal === "/classify") {

      this.tabBar = true;

    } else{

      this.tabBar = false;

    }

  }

}

大致说一下我之前流程，在App.vue页面获取当前的path来进行判断是否显示tabBar。但这个有一个弊端，当你打开一个应该隐藏tabBar的页面确实可以隐藏，后退也可以。就是不能刷新，只要一刷新就会显示出tabBar,会带来很不好的用户体验。

我目前在用的：

    App.vue文件：

        v-show="$route.meta.showTabbar"

    router.vue文件：

         { path: '/home', component: Home, meta: { showTabbar: true} }    //加上meta 在App.vue文件中通过 . 的形式判断是否为true

这种方式我也是刚刚才采用，还不是很清楚有什么弊端，如果大家有更好的方法也欢迎讨论。