Vue-router 2改变路由但不更新视图？

Vue.js V2.0.3
VUE路由器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只登录后处理登录页面逻辑成功我称之为：

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

现在，这里this.login只是调用vuex，更新登录的用户。

什么情况是，登录后，网址变更到/ home，但DOM不更新！

成功更改DOM的唯一方法是强制location.reload()，那不是我想要做的，因为它在Head中丢失了我动态加载的G脚本。

有什么想法来强制视图更新DOM？

注意：它发生只在用户第一次登录，如果他注销并回在中，重导向是好的

来源

2016-10-31 desicne

in'（）=> this。$ router.push（this.redirectToAfterLogin（）），//登录成功“，你在'redirectToAfterLogin'之后错过了'（）'吗？ –

@PanJunjie潘俊杰hm ...不，这似乎并非如此，因为它发生在承诺，如果我这样做，我得到类型错误TypeError：_this2.redirectToAfterLogin不是一个函数（...）我编辑了代码，向你展示了装入部分，但是并没有太多发生。 – desicne

'redirectToAfterLogins'是一个计算属性，而不是函数，'（）'不是必需的。你能显示你的路由器配置的内容吗？ – jeerbl

也许有在router.push一些bug，你可以尝试更换“来.matched.some（record => record.meta.requiresAuth）''with'to.meta.requiresAuth === true'

来源

2016-12-21 02:51:05 undefined

Vue-router 2改变路由但不更新视图？

回答

相关问题