Vue-router 在检查值是否存在后不重定向到页面

Question

美好的一天。我正在尝试为我的 Vue 应用程序创建一个守卫，如果状态中的值存在（不是 null 或未定义），它只会重定向到页面。但是，当我使用 beforeEnter 时，我得到一个循环引用，它不会将我重定向到该页面。如果我使用 beforeRouteEnter 我会正常重定向，但如果我更新页面，我不会重定向到上一页。这里的方法到底有什么问题可以在检查商店状态后将我重定向到该页面？

存储中的方法非常简单，我只是将来自 api 调用的任何内容保存在我的状态中，该状态开始时为 null。这里到底出了什么问题？

import Vue from 'vue'
import VueRouter from 'vue-router'
import form'@/components/form.vue'
import values'@/components/values.vue'
import store from '@/store.js'


Vue.use(VueRouter)
const routes = [
    { 
        path: '/', 
        component: form
    },
    { 
        path: '/values', 
        component: values,
        beforeRouteEnter (to, from, next) {
            guard(to, from, next)
        },
    }
]
const router = new VueRouter({
    mode: 'history',
    routes
})

const guard = function(to, from, next){
    let info = store.getters.result
    if(info){
        next('/values')
    } else {
        next('/')
    }
}

export default router

Answer 1

您必须使用 beforeEnter because beforeRouteEnter 是 in-component 挂钩的名称，不会在那里工作。你得到循环引用的原因是 next('/values') 重定向到它自己。将其更改为 next() 以告诉路由器继续使用当前路由而不重定向：

const guard = function(to, from, next){
    let info = store.getters.result
    if(info){
        next()
    } else {
        next('/')
    }
}

Vue-router 在检查值是否存在后不重定向到页面

Vue-router doesn't redirect to page after checking if value exists

store

vue.js

vue-router

vuex

vuejs2