javascript - 单击 vue-router 项目时更改组件并更新数据(ajax)

Question

单击路由器项目时，我想刷新(或重新加载)数据并显示正确的组件。 Pages.vue加载菜单并应在其 <router-view></router-view> 中显示正确的页面.

然后Page.vue是一个应该在其中加载的子路径。当我单击菜单项时，子页面(和组件)未加载，但浏览器中的路径(URL)正在更新。

如果我在该路由上手动刷新浏览器，则会显示正确的页面、组件和数据。单击菜单链接时无法加载。

页面.vue:https://github.com/jackbarham/vuejs-playground/blob/master/src/components/Pages.vue

<template>
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-3">
            <div class="list-group sidebar">
                <router-link v-for="page in pages" class="list-group-item" :to="'/pages/' + page.slug">{{ page.menu_title }}</router-link>
            </div>
        </div>
        <div class="col-md-9 col-sm-9 col-xs-9">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</template>

<script>
    export default {
        computed: {
            pages() {
                return this.$store.state.pages
            }
        },
        created() {
            this.$http.get('pages').then((response) => {
                this.$store.commit('setPages', response.body)
                console.log(response)
            }, (response) => {
                console.log("Error: " + response)
            })
        }
    }
</script>

Page.vue: https://github.com/jackbarham/vuejs-playground/blob/master/src/components/Page.vue

<template>
    <div>
        <vc-gig :content="content" v-if="content.type == 'gig'"></vc-gig>
        <vc-text :content="content" v-if="content.type == 'text'"></vc-text>
        <vc-news :content="content" v-if="content.type == 'news'"></vc-news>
        <vc-home :content="content" v-if="content.type == 'home'"></vc-home>
        <vc-image :content="content" v-if="content.type == 'image'"></vc-image>
        <vc-audio :content="content" v-if="content.type == 'audio'"></vc-audio>
        <vc-video :content="content" v-if="content.type == 'video'"></vc-video>
        <vc-gallery :content="content" v-if="content.type == 'gallery'"></vc-gallery>
        <vc-release :content="content" v-if="content.type == 'release'"></vc-release>
        <vc-forwarder :content="content" v-if="content.type == 'forwarder'"></vc-forwarder>
    </div>
</template>

<script>
    import Gig from './Pages/Gig.vue'
    import Text from './Pages/Text.vue'
    import News from './Pages/News.vue'
    import Home from './Pages/Home.vue'
    import Image from './Pages/Image.vue'
    import Audio from './Pages/Audio.vue'
    import Video from './Pages/Video.vue'
    import Gallery from './Pages/Gallery.vue'
    import Release from './Pages/Release.vue'
    import Forwarder from './Pages/Forwarder.vue'

    export default {
        components: {
            'vc-gig': Gig,
            'vc-text': Text,
            'vc-news': News,
            'vc-home': Home,
            'vc-image': Image,
            'vc-audio': Audio,
            'vc-video': Video,
            'vc-gallery': Gallery,
            'vc-release': Release,
            'vc-forwarder': Forwarder,
        },
        data() {
            return {
                content: [],
            }
        },
        methods: {
            getPage() {
                this.$http.get('pages/' + this.$route.params.pageSlug).then((response) => {
                    this.content = response.body
                    console.log(response)
                }, (response) => {
                    console.log(response)
                });
            }
        },
        changed() {
            console.log('changed')
        },
        created() {
            this.getPage()
        }
    }
</script>

我假设有一些方法可以观察父级的变化或点击 Pages.vue然后重新加载并显示正确的 Pages.vue页？

因此，单击 Pages.vue 中的菜单项然后在 Page.vue 中显示正确的组件.

我有 Github 链接以帮助查看该项目。

Answer 1

我猜问题是当前 pageSlug 更改时 this.content 没有更新。

所以你可以简单地通过在你的 Page.vue 中添加这个观察者来修复它，就像这样:

watch: {
  '$route.params.pageSlug' () {
    this.getPage()
  }
},

我希望这能解决问题。