Vue-router 2 изменяет маршрут, но не обновляет вид?

У меня есть проблема входа с веб-сайтом, который использует:

Vue.js v2.0.3
vue-router v2.0.1
vuex v0.8.2

В routes.js У меня есть простая настройка перехватчика

router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!router.app.auth.isUserLoggedIn) {
        next({
            path: '/login',
            query: { redirect: to.fullPath }
        })
    } else {
        next()
    }
} else {
    next() // make sure to always call next()!
}

})

И в login.vue, который обрабатывает логин логина входа после использования API Google только для успешного входа в систему, я вызываю это:

this.login(userData).then( 
    () => this.$router.push(this.redirectToAfterLogin), // Login success
    () => {} // Login failed
)


mounted: function(){
if (this.auth.isUserLoggedIn){
            // Let just redirect to the main page
            this.$router.push(this.redirectToAfterLogins)
        }else{
            Vue.nextTick(() => {
                this.loadGooglePlatform()
            })}}


computed: {
        redirectToAfterLogin: function() {
            if (this.$route.query.redirect){
                return this.$route.query.redirect
            }else{
                return '/'
            }
        }
    }

router.js

var VueRouter = require('vue-router')

// Router setup
export const router = new VueRouter({
    linkActiveClass: "is-active",
    mode: 'history',
    saveScrollPosition: true,
    routes: [
        { path: '', name: 'root', redirect: '/home' },
        { path: '/login', name: 'login', meta: { loadingNotRequired: true }, component: require('./pages/login.vue') },
        { path: '/logout', name: 'logout', meta: { loadingNotRequired: true }, component: require('./pages/logout.vue') },
        { path: '/home', name: 'home', title: 'Home', redirect: '/home/random', component: require('./pages/home.vue'),
            children: [
                { path: 'random', name: 'random', meta: { requiresAuth: true }, title: 'Random', component: require('./pages/random.vue') }
            ]  
        }
    ]
})

// Redirect to login page if not logged In
router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        // this route requires auth, check if logged in
        // if not, redirect to login page.
        if (!router.app.auth.isUserLoggedIn) {
            next({
                path: '/login',
                query: { redirect: to.fullPath }
            })
        } else {
            next()
        }
    } else {
        next() // make sure to always call next()!
    }
})

Теперь здесь this.login - это просто вызов vuex, чтобы обновить зарегистрированного пользователя.

Случается, что после входа в систему URL изменяется на /home, но DOM не обновляет!

Только способ, который успешно изменил DOM, заставлял location.reload(), и это не то, что я хочу сделать, поскольку он теряет мои динамически загруженные сценарии G в Head.

Любая идея о том, что делать, чтобы заставить просмотр обновить DOM?

ПРИМЕЧАНИЕ: это происходит только при первом входе в систему пользователя, если он выходит из системы и возвращается, перенаправление в порядке

Ответ 1

Может быть не идеальным решением, так как он собирается воссоздать компонент, но он будет работать для каждого случая, когда есть один и тот же маршрут и нужно обновить компонент.

Просто обновите <router-view/> или <router-view></router-view> с помощью

<router-view :key="$route.fullPath"></router-view>

Ответ 2

Возможно, вам следует установить функцию redirectToAfterLogin в методы, как это будет пересчитываться каждый раз. Вычисленное будет изменено только в случае изменения используемой v-модели. Чтобы придерживаться значения имени функции, я бы установил толчок маршрутизатора внутри.

mounted: function(){
   if (this.auth.isUserLoggedIn){
            // Let just redirect to the main page
            // this.$router.push(this.redirectToAfterLogins)
            this.redirectToAfterLogins()
   }else{
            Vue.nextTick(() => {
                this.loadGooglePlatform()
            })
   }
},
// computed: {
methods: {
    this.login(userData).then( 
       // () => this.$router.push(this.redirectToAfterLogin), // Login success
       () => this.redirectToAfterLogin(), // Login success
       () => {} // Login failed
    ),
    redirectToAfterLogin: function() {

        if (this.$route.query.redirect){
            // return this.$route.query.redirect
            this.$router.push(this.$route.query.redirect)
        }else{
            // return '/'
            this.$router.push('/')
        }
    }
}

"Однако отличие состоит в том, что вычисляемые свойства кэшируются на основе их зависимостей. Вычисленное свойство будет переоцениваться только при изменении некоторых его зависимостей. Это означает, что до тех пор, пока сообщение не изменилось, множественный доступ к вычисляемому свойству reversedMessage будет немедленно вернуть ранее вычисленный результат без необходимости повторного запуска функции. "

методы против вычисляемых и фильтры:

Доступ к экземпляру/данным vue внутри метода фильтра

Ответ 3

Vue повторно использует компоненты, где это возможно. Вы должны использовать beforeRouteUpdate для реагирования на коммутатор маршрута, который использует тот же компонент.

Ответ 4

У меня та же проблема "URL-адрес меняется на /home, но DOM не обновляется".
В моем проекте тег "переход" создал проблему.
Надеюсь, это полезно！

Ответ 5

Возможно, в router.push есть некоторая ошибка, вы можете попробовать заменить "to.matched.some(record = > record.meta.requiresAuth)" с помощью "to.meta.requiresAuth === true"