v-if 当路由器路径改变时

Question

谁能帮忙。

是否可以在路由模式更改时显示一些 DOM 元素。 代码

<div>
   <router-link v-if="$router.history.current['path'] !=='user/config'"
   class="btn btn-fill 
   btn-default" 
   tag="button" 
   to="/user/config">Change Config
    </router-link>
</div>

有效，但只有在刷新页面时，如何监听$router.history.current['path]的事件发生变化？

完整的组件代码：

    <template>
  <card class="card-user">
    <img slot="image" src="https://ununsplash.imgix.net/photo-1431578500526-4d9613015464?fit=crop&fm=jpg&h=300&q=75&w=400" alt="..."/>
       <router-link class="btn btn-fill btn-default" tag="button" to="/user/password-change">Change Passsword</router-link>
      </div>
      <div>
        <router-link class="btn btn-fill btn-default" tag="button" to="/user/password-change">Change Email</router-link>
      </div>
      <div>
        <router-link  v-if="v-if="$router.history.current['path'] !== '/user/config'"" class="btn btn-fill btn-default" tag="button" to="/user/config">Change Config</router-link>
      </div>
    </div>
  </card>
</template>
<script>
  import Card from 'src/components/UIComponents/Cards/Card.vue'
  export default {
    components: {
      Card
    },
    data () {
      return {
      }
    }
  }

</script>

但这个组件也是子用户Thx

Answer 1

我认为您的问题可能是您使用相同的 User 组件来渲染 /user 和 /user/config 路由。如果这是设置，vue-router 不会重新加载或重新渲染组件。为了使视图对路径中的更改做出反应，一种选择是添加更改的参数。通过这种方式，路由器将处理更改（请参阅 Dynamic Route Matching 上的 vue-router 文档）。如果你不想改变你的路由来添加这个参数，一个技巧是添加一个不断变化的:key到<router-view>：

<router-view :key="$route.fullPath"></router-view>

这将在路径发生变化时触发组件的完整生命周期（请注意，这可能会影响那些不需要重新渲染的组件的性能）。 然后在你的User 组件中：

<template>
  ...
  <router-link  v-if="isNotInConfig()" class="btn btn-fill btn-default" tag="button" to="/user/config">Change Config</router-link>
  ...
</template>

<script>
export default {
  ...
  methods: {
    isNotInConfig() {
      return this.$router.history.current["path"] !== "/user/config";
    }
  },
  ...
};
<script>

现场演示

我已经完成了一个完整的工作直播demo on codesandbox.io。