vue.js - 单个文件组件 - 在从导航栏更改值时重新安装组件

Question

这是我的 vuejs 应用程序的结构。

<template>
    <div class="page-body-wrapper">
        <Sidebar/>
        <div class="main-panel">
            <Header/>
            <div class="content-wrapper">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '../header/header';
    import Sidebar from '../sidebar/sidebar';
    export default {
        name: 'Layout',
        components: {
            Header,
            Sidebar
        }
    }
</script>

在内部呈现的所有路由中<router-view>，我正在调用基于存储变量“myValue”的各种函数和 api 调用。而且，我的<Header/>组件中有一个下拉列表（这对所有路线都很常见）。每当我从标题的下拉列表中选择一个值时，存储变量“myValue”就会发生变化。<router-view>现在，每当存储变量“myValue”发生变化时，我都需要重新安装在内部呈现的任何组件。使用 watch 将是最后的选择，因为我将不得不在许多组件中做同样的事情。我不能使用计算，因为我必须在“创建”或“安装”挂钩中获取所有数据。<router-view>当存储变量更改时，是否有任何选项可以重新安装整个？注意：我使用 vuex 进行状态管理。

标签： vue.jsvuejs2vue-componentvuexvue-router

Answer 1

只需传递一个keyto <router-view :key="myValue"></router-view>，或者在你的情况下<router-view :key="$store.state.myValue"></router-view>。

另请查看此答案。