我对vue.js很新,并试图建立一个SPA。基本上,我使用别名到我的API端点定义来自我后端的所有路由。他们中的很多人使用相同的组件。使用router.beforeEach和vue-resource获取数据。
现在,当我从一条路线导航到另一条共享相同模板的路线时,我的路由器视图不会更新。
这是我的代码:
<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>
答案 0 :(得分:0)
您的data
对象不属于您的Vue组件。它是在您的Vue应用程序之外定义的。
即使您的组件 - home
和site
返回data.content.body
对象,您的主data
对象也不属于Vue的反应系统。因此,不会跟踪data
对象中的更改。
您可以在此处详细了解:https://vuejs.org/guide/reactivity.html
为确保不会发生这种情况,您需要将data
定义为组件本身的一部分。并且您需要在路由组件上作为mounted
挂钩的一部分进行http调用,该组件可以访问组件的this.data
。
如果您需要在组件之间共享data
(最有可能),则需要使用 vuex 进行状态管理,以便您拥有整个Vue应用的共享状态。
您可以在此处详细了解Vuex:http://vuex.vuejs.org/en/intro.html
答案 1 :(得分:0)
这是API调用的vue / vue-router / vuex / 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')