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

Vue-router 2 changes route but does not update the view?

本文关键字:更新 新视图 改变 路由 Vue-router      更新时间:2023-09-26

我有一个登录问题的网站使用:

  • 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中,它在使用Google 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,更新登录的用户。

登录后,URL将更改为/home,但DOM没有更新!

成功改变DOM的唯一方法是强迫location.reload(),这不是我想做的,因为它失去了我在Head中动态加载的G脚本。

有什么办法来强制视图更新DOM吗?

注意:它只发生在用户的第一次登录,如果他注销和重新登录,重定向是好的

可能不是一个完美的解决方案,因为它将重新创建组件,但它将适用于具有相同路由的每种情况&需要更新组件

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

我们尽可能重用组件。你应该使用beforeRouteUpdate来响应使用相同组件的路由开关

我有同样的问题"URL更改到/home,但DOM不更新"。
在我的项目中,标签"transition"造成了这个问题。
希望对大家有所帮助!

也许你应该将redirectToAfterLogin函数设置为方法,这样每次都会重新计算。只有当使用的v-model改变时,计算才会被修改。为了坚持函数名的含义,我将在其中设置router push。

登录。vue:

mounted: function(){
   if (this.auth.isUserLoggedIn){
            // Let's 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('/')
        }
    }
}
  • https://v2.vuejs.org/v2/guide/computed.html计算属性
  • https://v2.vuejs.org/v2/guide/computed.html Computed-Caching-vs-Methods

"然而,不同之处在于计算属性是基于它们的依赖来缓存的。计算属性只有在其某些依赖项发生更改时才会重新计算。这意味着只要消息没有更改,对reversedMessage computed属性的多次访问将立即返回先前计算的结果,而不必再次运行该函数。"

方法vs computed and filters:

  • 访问值实例/数据在过滤器方法