Vue 2使用router-link跳转至CreatePost后按钮仍显示的问题求助

问题根源很直接：你的按钮写在App.vue里，而App.vue是所有路由页面的父组件，不管跳转到哪个页面，App.vue的内容都会被渲染，所以按钮会一直显示。下面给你两种简单的解决方式：

方法一：通过当前路由路径控制显示 #

直接在router-link上添加v-if，判断当前路径不是/post/create就显示按钮：

<template>
  <div>
    <router-link to="/post/create" exact v-if="$route.path !== '/post/create'">
      <button type="button">Create Post</button>
    </router-link>
    <router-view/>
  </div>
</template>

方法二：利用路由元信息（更灵活） #

这种方式适合以后需要在多个页面隐藏按钮的场景：

1. 修改路由配置，给CreatePost路由添加元信息：

Vue.use(Router)
export default new Router ({
  routes:[
    {
      path: '/post/create',
      name: 'CreatePost',
      component: CreatePost,
      meta: { hideCreateButton: true } // 标记需要隐藏按钮
    }  
  ]
})

2. 在App.vue里通过元信息判断是否显示按钮：

<template>
  <div>
    <router-link to="/post/create" exact v-if="!$route.meta.hideCreateButton">
      <button type="button">Create Post</button>
    </router-link>
    <router-view/>
  </div>
</template>

内容的提问来源于stack exchange，提问作者struggling