求助：如何监听Vue路由路径变化以动态控制DOM元素显示？

嘿，我来帮你搞定这个问题～你之前的代码之所以只有页面刷新才生效，核心原因是$router.history.current.path并不是Vue的响应式属性，所以当路由路径变化时，Vue没法自动触发这个判断的更新。下面给你两种简单可行的解决办法：

方法一：利用响应式的$route.path + 计算属性 #

Vue的$route对象是响应式的，其中的path属性会随着路由变化自动更新。我们可以把判断逻辑封装成一个计算属性，这样就能自动响应路由变化了：

<template>
  <card class="card-user">
    <img slot="image" src="https://unu...">
    <!-- 这里用计算属性代替直接判断 -->
    <div>
      <router-link 
        v-if="shouldShowConfigBtn" 
        class="btn btn-fill btn-default" 
        tag="button" 
        to="/user/config"
      >
        Change Config
      </router-link>
    </div>
  </card>
</template>

<script>
export default {
  computed: {
    shouldShowConfigBtn() {
      // 直接用响应式的$route.path判断
      return this.$route.path !== '/user/config'
    }
  }
}
</script>

这种方法是最推荐的，因为计算属性天生就是为这种依赖响应式数据的判断逻辑设计的，代码简洁且性能友好。

方法二：监听路由变化（watch） #

如果你需要在路由变化时做更多额外逻辑，也可以用watch监听$route的变化，手动控制显示状态：

<template>
  <card class="card-user">
    <img slot="image" src="https://unu...">
    <div>
      <router-link 
        v-if="showConfigBtn" 
        class="btn btn-fill btn-default" 
        tag="button" 
        to="/user/config"
      >
        Change Config
      </router-link>
    </div>
  </card>
</template>

<script>
export default {
  data() {
    return {
      showConfigBtn: false
    }
  },
  mounted() {
    // 初始化时先判断一次
    this.checkShowBtn()
  },
  watch: {
    // 监听路由变化
    $route() {
      this.checkShowBtn()
    }
  },
  methods: {
    checkShowBtn() {
      this.showConfigBtn = this.$route.path !== '/user/config'
    }
  }
}
</script>

两种方法都能实现你要的效果，第一种更简洁，优先推荐～

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