#vue.js #vuejs2 #vuex #vue-router #store
#vue.js #vuejs2 #vuex #vue-router #Магазин
Вопрос:
Добрый день. Я пытаюсь создать защиту для своего приложения 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
Ответ №1:
Вы должны использовать beforeEnter
because beforeRouteEnter
— это имя встроенного хука, и оно там не будет работать. Причина, по которой вы получили циклическую ссылку, заключается в том, что next('/values')
перенаправляет на себя. Измените его на next()
, чтобы указать маршрутизатору продолжать текущий маршрут без перенаправления:
const guard = function(to, from, next){
let info = store.getters.result
if(info){
next()
} else {
next('/')
}
}