我对 vue.js 相当陌生,正在尝试构建 SPA。基本上,我使用别名定义从后端到 API 端点的所有路由。他们中的很多人都使用相同的组件。使用 router.beforeEach 和 vue-resource 获取数据。
现在,当我从一条路线导航到共享相同模板的另一条路线时,我的路由器 View 不会更新。
这是我的代码:
<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 react 系统的一部分。因此,不会跟踪该 data
对象中的更改。
您可以在这里阅读更多相关信息:https://vuejs.org/guide/reactivity.html
为了确保这种情况不会发生,您需要将数据
定义为组件本身的一部分。并且您需要将 http 调用作为路由组件上 mounted
Hook 的一部分,该组件可以访问组件的 this.data
。
如果您需要在组件之间共享数据
(最有可能),那么您需要使用vuex进行状态管理,它允许您为整个组件共享状态Vue 应用程序。
您可以在这里阅读有关 Vuex 的更多信息:http://vuex.vuejs.org/en/intro.html
关于javascript - vue,js vue-router 2组件数据不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40224687/