返回

Vue Router 路由切换后视图未更新？详尽剖析与解决对策

vue.js

Vue Router 路由更改但视图未更新？详尽剖析与解决之道

问题陈述

在采用 Vue.js、vue-router 和 vuex 构建的应用程序中，登录成功后，路由切换至 "/home"，然而，视图却原地踏步，未作任何响应。

根源探究

追根溯源，问题的症结可能潜藏于以下方面：

  • 路由守卫拦截器： 登录成功后，login.vue 中调用 this.$router.push(this.redirectToAfterLogin)，却未接续执行 next() 函数。
  • 登录组件： 登录成功后，应用 this.$router.replace(this.redirectToAfterLogin) 替换 this.$router.push()，可杜绝历史记录中重复出现登录页面的情形。

解决方案

针对上述问题，可采取如下对策进行修正：

1. 修订路由守卫拦截器：

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        // 鉴于此路由需要认证，则检查登录状态
        // 若未登录，则重定向至登录页面
        if (!router.app.auth.isUserLoggedIn) {
            next({
                path: '/login',
                query: { redirect: to.fullPath }
            })
        } else {
            next()
        }
    } else {
        next() // 确保始终调用 next()！
    }
})

2. 修改登录组件：

this.login(userData).then(
    () => this.$router.replace(this.redirectToAfterLogin), // 登录成功
    () => {} // 登录失败
)

其它潜在诱因及其应对策略

除却上述解决方案外，还有一些其他因素可能导致此类问题：

  • 异步组件： 务必确保异步组件已妥善加载并解析。
  • 服务端渲染： 在服务端渲染应用程序时，路由更新或许需要人工触发。
  • Vuex 存储更改： 确保 Vuex 存储中的变更已适时触发，且组件正严密监控这些变动。

结语

通过修复路由守卫拦截器和登录组件中的问题，我们得以确保 Vue Router 路由更改时，视图能够正确刷新。上述解决方案有助于克服在应用 Vue.js、vue-router 和 vuex 时可能遇到的此类难题。

常见问题解答

1. 为何 next() 函数在路由守卫拦截器中至关重要？

  • next() 函数用于向路由守卫拦截器指示，已处理完导航操作，可继续执行后续动作。若未调用 next()，则路由更改将被阻塞。

2. 替换与推送的区别是什么？

  • 替换不会在历史记录中添加新条目，而推送会添加新条目。在登录场景中，使用替换可避免用户多次单击后退按钮时出现重复登录页面。

3. 如何确保异步组件已正确加载？

  • 在组件中使用 created() 或 mounted() 生命周期钩子，以确保组件在加载并解析后才执行特定的操作。

4. 在服务端渲染应用程序时，如何触发路由更新？

  • 在服务器端渲染应用程序中，通常使用 hydrate() 方法来将客户端路由状态应用到服务器端渲染的应用程序。这将确保在客户端进行水化后，路由更新得到正确处理。

5. 如何监控 Vuex 存储中的变更？

  • 在组件中使用 watch() 方法，监听 Vuex 存储中特定状态的变化。当状态发生变化时，watch() 方法将触发，从而更新组件视图。