Vue-router 2 thay đổi tuyến đường nhưng không cập nhật chế độ xem?

Question

Tôi có một vấn đề đăng nhập với trang web đó sử dụng:

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

Trong routes.js Tôi có một thiết lập interceptor đơn giản

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()! 
} 

})

Và trong login.vue, mà xử lý logic trang đăng nhập sau khi sử dụng Google API chỉ cho lần đăng nhập thành công Tôi gọi đây là:

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


mounted: function(){ 
if (this.auth.isUserLoggedIn){ 
      // Let's 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()! 
    } 
}) 

Bây giờ đây this.login chỉ là lời kêu gọi vuex, để cập nhật người dùng đã đăng nhập.

gì xảy ra là sau khi đăng nhập, URL thay đổi đến/home, nhưng DOM không cập nhật!

Cách duy nhất thay đổi thành công DOM là buộc location.reload() và đó không phải là những gì tôi muốn làm, vì nó mất các tập lệnh G được tải động của tôi trong phần Head.

Bất kỳ ý tưởng nào về việc cần làm để bắt buộc chế độ xem cập nhật DOM?

LƯU Ý: nó chỉ xảy ra trên đăng nhập đầu tiên của người dùng, nếu anh đăng xuất và back-in, chuyển hướng là tốt

Answer 1

Có thể có một số lỗi trong router.push, bạn có thể thử thay thế 'để .matched.some (record => record.meta.requiresAuth) 'bằng cách sử dụng' to.meta.requiresAuth === true '