Vue,js Vue -router 2组件数据没有更新

vue,js vue-router 2 component data doesn't update

本文关键字：Vue 更新 数据 js -router 组件      更新时间：2023-09-26

我对vue.js相当陌生，并试图建立一个SPA。基本上，我定义了所有从我的后端到我的API端点的别名路由。很多都使用相同的组件。数据通过路由器获取。

现在，当我从一个路由导航到另一个共享相同模板的路由时，我的路由视图不会更新。

下面是我的代码:

 <script>
var data = {
    content: null
}
const site = {
    template:'<div>{{this.title}}</div>',
    data: function () {
      return data.content.body
    }
}
const home = {
    template:'<div>{{this.title}}</div>',
    data: function () {
      return data.content.body
    }
}
const routes = [
            { path: '/api/12.json', component: home, alias: '/' },
            { path: '/api/4.json', component: site, alias: '/projekte' },
            { path: '/api/5.json', component: site, alias: '/projekte/projekt-1' },
            { path: '/api/7.json', component: site, alias: '/projekte/projekt-2' },
            { path: '/api/6.json', component: site, alias: '/projekte/projekt-3' },
            { path: '/api/8.json', component: site, alias: '/agentur' },
            { path: '/api/9.json', component: site, alias: '/lab' },
            { path: '/api/10.json', component: site, alias: '/kontakt' },
        ]
const router = new VueRouter({
    routes
})
router.beforeEach((to, from, next) => {
    Vue.http.get(to.matched[0].path).then((response) => {
        data.content = response;
        console.log(data.content);
        next();
    }, (response) => {
        data.content = {
            'body': {
                'title': 'Error 404'
            }
        };
        next();
    });
})
const app = new Vue({
    router
}).$mount('#app')
</script>

您的data对象不是Vue组件的一部分。它是在你的Vue应用程序之外定义的。

即使你的组件- home和site返回data.content.body对象，你的主data对象不是Vue的反应系统的一部分。因此，不跟踪data对象中的更改。

您可以在这里阅读更多信息:https://vuejs.org/guide/reactivity.html

为了确保不会发生这种情况，您需要将data定义为组件本身的一部分。你需要把你的http调用作为路由组件的mounted钩子的一部分，它可以访问组件的this.data。

如果你需要在组件之间共享data(很有可能)，那么你需要使用状态管理，使用vuex，允许你在整个Vue应用程序中共享状态。

您可以在这里阅读更多关于Vuex的信息:http://vuex.vuejs.org/en/intro.html

这是一个API调用的vue/vue-router/vue/vue-resource的工作示例。谢谢Mani给我的提示。

const site = {
    template:'<div>{{ content.title }}</div>',
    computed: {
        content (){
            return store.state.routeContent
        }
    }
}
const home = {
    template:'<div>{{ content.title }}</div>',
    computed: {
        content (){
            return store.state.routeContent
        }
    }
}
const notFound = {
    template: '<div>{{ content.title }}</div>',
    computed: {
        content (){
            return store.state.routeContent
        }
    }
}
const routes = [
    { path: '/api/12.json', component: home, alias: '/' },
    { path: '/api/4.json', component: site, alias: '/projekte' },
    { path: '/api/5.json', component: site, alias: '/projekte/projekt-1' },
    { path: '/api/7.json', component: site, alias: '/projekte/projekt-2' },
    { path: '/api/6.json', component: site, alias: '/projekte/projekt-3' },
    { path: '/api/8.json', component: site, alias: '/agentur' },
    { path: '/api/9.json', component: site, alias: '/lab' },
    { path: '/api/10.json', component: site, alias: '/kontakt' },
    { path: '/*', component: notFound }
]
const store = new Vuex.Store({
    state: {
        routeContent: null
    },
    mutations: {
        routeContent (state, payload) {
            state.routeContent = payload
            document.title = payload.title
        }
    }
})
const router = new VueRouter({
    routes
})
router.beforeEach((to, from, next) => {
    Vue.http.get(to.matched[0].path).then((response) => {
        store.commit('routeContent', response.body)
        next()
    }, (response) => {
        console.log(response);
        errorObject = {
            'title': 'Error 404'
        },
        store.commit('routeContent', errorObject)
        next()
    });
})
const app = new Vue({
    router
}).$mount('#app')
相关文章：