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

只需使用你的任何参数的关键，它的自动重载子..

为了重新加载/重新渲染/刷新组件，停止长编码。Vue.JS可以做到这一点。

只需使用:key属性。

例如:

<my-component :key="unique" />

我正在使用BS Vue表槽。我要为这个组件做一些事情，让它是唯一的。

Why?

.．.需要强制更新吗?

也许你没有在最好的状态下探索Vue:

要使Vue自动对值更改作出反应，必须在数据中初始声明对象。如果没有，则必须使用Vue.set()添加它们。

请参阅下面演示中的注释。或者在JSFiddle中打开相同的演示。

new Vue({ el: '#app', data: { person: { name: 'Edson' } }, methods: { changeName() { // because name is declared in data, whenever it // changes, Vue automatically updates this.person.name = 'Arantes'; }, changeNickname() { // because nickname is NOT declared in data, when it // changes, Vue will NOT automatically update this.person.nickname = 'Pele'; // although if anything else updates, this change will be seen }, changeNicknameProperly() { // when some property is NOT INITIALLY declared in data, the correct way // to add it is using Vue.set or this.$set Vue.set(this.person, 'address', '123th avenue.'); // subsequent changes can be done directly now and it will auto update this.person.address = '345th avenue.'; } } }) /* CSS just for the demo, it is not necessary at all! */ span:nth-of-type(1),button:nth-of-type(1) { color: blue; } span:nth-of-type(2),button:nth-of-type(2) { color: red; } span:nth-of-type(3),button:nth-of-type(3) { color: green; } span { font-family: monospace } <script src="https://unpkg.com/vue"></script> <div id="app"> <span>person.name: {{ person.name }}</span><br> <span>person.nickname: {{ person.nickname }}</span><br> <span>person.address: {{ person.address }}</span><br> <br> <button @click="changeName">this.person.name = 'Arantes'; (will auto update because `name` was in `data`)</button><br> <button @click="changeNickname">this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)</button><br> <button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)</button> <br> <br> For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below). </div>

要掌握Vue的这一部分，请查看关于反应性-更改检测警告的官方文档。这是一本必读的书!

试试这个神奇的咒语:

vm.$forceUpdate();
//or in file components
this.$forceUpdate();

不需要创建任何悬挂变量:)

更新:当我刚开始使用VueJS时，我发现了这个解决方案。然而，进一步的探索证明这种方法是一种拐杖。据我回忆，在一段时间内，我摆脱了它，只是把所有不能自动刷新的属性(大部分是嵌套的)放入计算属性中。

更多信息请访问:https://v2.vuejs.org/v2/guide/computed.html

确定. .可以简单地使用key属性在任何时候强制重新呈现(重新创建)。

<mycomponent :key="somevalueunderyourcontrol"></mycomponent>

有关示例，请参见https://jsfiddle.net/mgoetzke/epqy1xgf/

这里也有讨论:https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

除了页面重载方法(闪烁)，没有一个适合我(:键没有工作)。

我发现这个方法从旧vue.js论坛，这是为我工作:

https://github.com/vuejs/Discussion/issues/356

<template>
    <div v-if="show">
       <button @click="rerender">re-render</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {show:true}
        },
        methods:{
            rerender(){
                this.show = false
                this.$nextTick(() => {
                    this.show = true
                    console.log('re-render start')
                    this.$nextTick(() => {
                        console.log('re-render end')
                    })
                })
            }
        }
    }
</script>