Question

任何人都可以提供帮助。

路由pat更改时是否可以显示一些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。

v-如果路由器路径发生变化

1 个答案:

现场演示