vue.js - Vue Router重定向后无法获取路由的问题？

Question

最近有vue项目一个登录的需求，需要跳到外部链接获取一个code。然后重定向到我的登录页

http://127.0.0.1:8080/login?code=xxxxxxxxxxxxxxxxxxxfadb

重定向链接如上
但这个重定向有个问题，回来以后被vue路由守卫拦截了，而且并不能指向/login这个路由，router.beforeEach中的to.path为空，我没法拿到code做下一步操作。请问有没有朋友遇过相似的问题并解决的？

Answer 1

得看一下你的导航守卫是怎么做的了。
没有提供的话，只能说建议你查看开源项目中关于重定向的解决方案。

• /src/permission.js at master · jeecgboot/ant-design-vue-jeecg
• /src/permission.js at master · yangzongzhuan/RuoYi-Vue

Answer 2

在Vue Router中，当你通过外部链接重定向回你的应用时，确实可能会遇到路由守卫（如beforeEach）中的to对象属性不完整的问题，尤其是当重定向不是通过Vue Router的内置机制进行时。这通常是因为Vue Router没有完整地捕获到重定向后URL中的查询参数或路径。

针对你描述的情况，有几个可能的解决方案：

1. 使用全局路由守卫处理重定向

确保你的全局路由守卫（beforeEach）可以正确处理重定向后的URL。如果to.path为空，你可以尝试检查window.location或document.location来获取完整的URL，并从中提取查询参数。

router.beforeEach((to, from, next) => {  if (to.path === '' || to.path === undefined) {    // 如果to.path为空或未定义，则可能是通过外部链接重定向回来的    // 可以从window.location或document.location获取完整URL    const query = new URLSearchParams(window.location.search);    const code = query.get('code');    // 现在你可以使用code做进一步的处理    // 例如，可以将code存储在Vuex中，或者作为参数传递给登录组件    // 接着，手动跳转到登录路由    next('/login');  } else {    // 正常路由跳转逻辑    next();  }});

2. 在登录组件中处理查询参数

另一种方法是在登录组件的created或mounted生命周期钩子中直接处理查询参数。由于组件已经挂载，你可以安全地访问this.$route来获取当前的路由对象，并从中提取查询参数。

export default {  name: 'Login',  created() {    const query = this.$route.query;    const code = query.code;    // 使用code进行登录操作  },  // ...}

3. 使用Vue Router的query属性

确保你的Vue Router配置正确处理了查询参数。在Vue Router中，查询参数应该可以通过this.$route.query访问。

4. 调试和日志记录

如果上述方法都不奏效，你可能需要添加更多的日志记录来调试问题。检查重定向后的完整URL，确认查询参数是否按预期传递，并检查Vue Router的配置和路由守卫的逻辑是否正确。

注意事项

• 确保你的Vue Router版本是最新的，或者至少是一个稳定且受支持的版本。
• 检查任何可能影响路由行为的中间件或服务器配置。
• 如果你的应用是单页面应用（SPA），确保服务器正确配置了重定向和重写规则，以便所有路由都返回你的应用入口文件（通常是index.html）。

最后，如果问题依然无法解决，可能需要查看具体的代码实现和配置细节，或者寻求社区和论坛的进一步帮助。