Javascript vue，js vue路由器2组件数据不存在'；t更新

我是vue.js的新手，正在尝试建立一个水疗中心。基本上，我使用别名定义了从后端到API端点的所有路由。他们中的许多人使用相同的组件。使用router.beforeach和vue资源获取数据

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

这是我的密码：

 <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>

风险值数据={
内容：空
}
施工现场={
模板：“{this.title}}”，
数据：函数（）{
返回data.content.body
}
}
康斯特之家={
模板：“{this.title}}”，
数据：函数（）{
返回data.content.body
}
}
常数路由=[
{path:'/api/12.json'，组件：home，别名：'/'}，
{path:'/api/4.json'，组件：站点，别名：'/projekte'}，
{path:'/api/5.json'，组件：site，别名：'/projekte/projekt-1'}，
{path:'/api/7.json'，组件：site，别名：'/projekte/projekt-2'}，
{path:'/api/6.json'，组件：site，别名：'/projekte/projekt-3'}，
{path:'/api/8.json'，组件：site，别名：'/agentur'}，
{path:'/api/9.json'，组件：站点，别名：'/lab'}，
{path:'/api/10.json'，组件：site，别名：'/kontakt'}，
]
常量路由器=新的VueRouter({
路线
})
路由器.beforeach（（到、从、下一个）=>{
Vue.http.get（to.matched[0].path）。然后（（响应）=>{
data.content=响应；
console.log（data.content）；
next（）；
}，（回应）=>{
data.content={
“身体”：{
“标题”：“错误404”
}
};
next（）；
});
})
const app=新的Vue({
路由器
}).$mount（“#应用程序”）

您的

数据

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

即使您的组件-

主页

和

站点

返回

data.content.body

对象，您的主

数据

对象也不是Vue反应系统的一部分。因此，不会跟踪

数据

对象中的更改

您可以在此处阅读更多信息：

为确保不会发生这种情况，您需要将

数据定义为组件本身的一部分。您需要作为route组件上的
挂载的
钩子的一部分进行http调用，该组件可以访问组件的
此.data

如果您需要在组件（最有可能）之间共享
数据
，那么您需要使用vuex进行状态管理，这样您就可以拥有整个Vue应用程序的共享状态

您可以在此处阅读有关Vuex的更多信息：
您的
数据
对象不是Vue组件的一部分。它是在Vue应用程序之外定义的

即使您的组件-
主页
和
站点
返回
data.content.body
对象，您的主
数据
对象也不是Vue反应系统的一部分。因此，不会跟踪
数据
对象中的更改

您可以在此处阅读更多信息：

为确保不会发生这种情况，您需要将
数据定义为组件本身的一部分。您需要作为route组件上的
挂载的
钩子的一部分进行http调用，该组件可以访问组件的
此.data

如果您需要在组件（最有可能）之间共享
数据
，那么您需要使用vuex进行状态管理，这样您就可以拥有整个Vue应用程序的共享状态

您可以在此处阅读有关Vuex的更多信息：
以下是一个用于API调用的vue/vue路由器/Vuex/vue资源示例。谢谢你给我的提示

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')

const站点={
模板：“{content.title}}”，
计算：{
内容（）{
return store.state.routeContent
}
}
}
康斯特之家={
模板：“{content.title}}”，
计算：{
内容（）{
return store.state.routeContent
}
}
}
常量未找到={
模板：“{content.title}}”，
计算：{
内容（）{
return store.state.routeContent
}
}
}
常数路由=[
{path:'/api/12.json'，组件：home，别名：'/'}，
{path:'/api/4.json'，组件：站点，别名：'/projekte'}，
{path:'/api/5.json'，组件：site，别名：'/projekte/projekt-1'}，
{path:'/api/7.json'，组件：site，别名：'/projekte/projekt-2'}，
{path:'/api/6.json'，组件：site，别名：'/projekte/projekt-3'}，
{path:'/api/8.json'，组件：site，别名：'/agentur'}，
{path:'/api/9.json'，组件：站点，别名：'/lab'}，
{path:'/api/10.json'，组件：site，别名：'/kontakt'}，
{路径：'/*'，组件：notFound}
]
const store=新的Vuex.store({
声明：{
routeContent:空
},
突变：{
routeContent（状态、有效负载）{
state.routeContent=有效负载
document.title=payload.title
}
}
})
常量路由器=新的VueRouter({
路线
})
路由器.beforeach（（到、从、下一个）=>{
Vue.http.get（to.matched[0].path）。然后（（响应）=>{
store.commit（'routeContent'，response.body）
下一个（）
}，（回应）=>{
控制台日志（响应）；
errorObject={
“标题”：“错误404”
},
提交（'routeContent'，errorObject）
下一个（）
});
})
const app=新的Vue({
路由器
}).$mount（“#应用程序”）
下面是一个用于API调用的vue/vue路由器/vuex/vue资源示例。谢谢你给我的提示

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')

const站点={
模板：“{content.title}}”，
计算：{
内容（）{
return store.state.routeContent
}
}
}
康斯特之家={
模板：“{content.title}}”，
计算：{
内容（）{
返回store.state.routeCon