Блог

Добрый день. Я пытаюсь создать защиту для своего приложения Vue, которое перенаправляет на страницу только в том случае, если существует значение в состоянии (не null или undefined). Однако, когда я использую 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
  

Вы должны использовать beforeEnter because beforeRouteEnter — это имя встроенного хука, и оно там не будет работать. Причина, по которой вы получили циклическую ссылку, заключается в том, что next('/values') перенаправляет на себя. Измените его на next() , чтобы указать маршрутизатору продолжать текущий маршрут без перенаправления:

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