【问题标题】:Vue Cannot read property '$root' of undefinedVue无法读取未定义的属性'$root'
【发布时间】:2026-02-10 08:35:01
【问题描述】:

我的main.js 文件中有以下代码:

import Vue from 'vue';
import App from './components/App';
import router from './router';

const app = new Vue({
  data: { loading: false },
  router,
  render: h => h(App),
}).$mount('#app');

现在我尝试从我的路由器(./router/index.js)设置加载变量:

router.beforeEach((to, from, next) => {
    this.$root.loading = true;
    next();
})

router.afterEach((to, from) => {
    this.$root.loading = false;
    next();
})

但它不起作用。我总是得到

Cannot read property '$root' of undefined

任何想法我做错了什么?

【问题讨论】:

    标签: vue.js vue-component vue-router


    【解决方案1】:

    你应该在下一个回调中使用this,因为在导航确认之前调用了守卫,因此新的进入组件甚至还没有创建。

    router.beforeEach((to, from, next) => {
        //vm refers to this
        next((vm)=>{vm.$root.loading = true;});
    })
    
    router.afterEach((to, from, next) => {
        next((vm)=>{vm.$root.loading = false;});
    })
    

    【讨论】:

    • 好吧,我高兴得太早了 ;-) router.afterEach 没有下一个功能
    • 是的,你是对的,因为每个都没有下一个回调router.vuejs.org/api/#router-aftereach
    • 但是当我无法调用next 时,如何将$root.loading 设置为false
    最近更新 更多