v-if 当路由器路径改变时
[英] v-if when router path changes
本文介绍了v-if 当路由器路径改变时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
谁能帮忙.
是否可以在路由 pat 更改时显示某些 DOM 元素.代码
<router-link v-if="$router.history.current['path'] !=='user/config'"class="btn btn-fillbtn-默认"标签=按钮"to="/user/config">更改配置</路由器链接>
可以，但是只有在刷新页面时，如何监听$router.history.current['path] 的事件改变了?
完整的组件代码:
<模板><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">更改密码</router-link>
<div><router-link class="btn btn-fill btn-default" tag="button" to="/user/password-change">更改邮箱</router-link>
<div><router-link v-if="v-if="$router.history.current['path'] !== '/user/config'"" class="btn btn-fill btn-default" tag="button" to="/user/config">更改配置</router-link>
</卡></模板><脚本>从src/components/UIComponents/Cards/Card.vue"导入卡片导出默认{成分: {卡片},数据 () {返回 {}}}
而且这个组件也是子用户 Thx
解决方案
我认为您的问题可能是您使用相同的 User 组件来呈现 /user和 /user/config 路由.如果这是设置，vue-router 不会重新加载或重新渲染组件.为了使视图对路径中的变化做出反应，一种选择是添加一个变化的参数.这样，路由器将处理更改(请参阅 Dynamic 上的 vue-router 文档路由匹配).如果你不想改变你的路由来添加这个参数，一个技巧是添加一个变化的 :key 到
每当路径发生变化时，这将触发组件的完整生命周期(请注意，这可能会影响那些不需要重新渲染的组件的性能).然后在您的 User 组件中:
...<router-link v-if="isNotInConfig()" class="btn btn-fill btn-default" tag="button" to="/user/config">更改配置</router-link>...</模板><脚本>导出默认{...方法: {isNotInConfig() {返回 this.$router.history.current["path"] !== "/user/config";}},...};<脚本>
现场演示
我已经制作了一个完整的实时关于codesandbox.io的演示.
may anyone help.
Is it possible to show some DOM element when route pat changes.
Code
<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>
It works, but only when refreshing a page, how to listen to event of $router.history.current['path] changed?
Full component code:
<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>
But also this component is child User Thx
解决方案
I think your problem could be that you are using the same User component to render both /user and /user/config routes. If this is the setup, vue-router doesn't reload or re-render the component. To make the view react to changes in the path one option would be that of adding a parameter that changes. In this way, the router would handle the change (see vue-router docs on Dynamic Route Matching). If you don't want to change your routes to add this parameter, a trick is to add a changing :key to <router-view>:
<router-view :key="$route.fullPath"></router-view>
this will trigger a component full-lifecycle whenever the path changes (beware that this could impact performance for those components that wouldn't need a re-render).
Then in your User component:
<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>
Live demo
I've put together a full working live demo on codesandbox.io.
这篇关于v-if 当路由器路径改变时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
