Question

使用vue.js和vue-router，我希望拥有应用程序的全局状态属性（组件之间共享某些属性），并根据该属性的值来阻止路由。

例如，如果状态未初始化，我想将所有路由重定向到根目录“ /”。我尝试了以下方法：

Vue.use(Router)

const router = new Router({
    routes: routes
})

// global status property
Vue.prototype.$isInitialized = false

router.beforeEach((to, from, next) => {
    if (!this.$isInitialized) { // <--- does not work, can't access Vue instance from here
        next("/")
    }
    else {
        next()
    }
})

此代码不起作用，因为我无法从全局路由器挂钩访问Vue实例。在Vue中实现此行为的正确方法是什么？

Answer 1

现在解决了将全局属性附加到路由器实例而不是Vue实例的问题：

Vue.use(Router)

// global status property
Router.prototype.$isAppInitialized = false

const router = new Router({
    routes: routes
})

router.beforeEach((to, from, next) => {
    if (to.path !== "/" && !router.$isAppInitialized) { 
        next("/")
    }
    else {
        next()
    }
})

之所以可行，是因为可以访问组件中的路由器实例并更新全局属性，但对我来说却像是黑客。请让我知道是否有更好的方法可以做到这一点。

Vue实例状态和路由重定向

1 个答案: