VueJS 将外部站点添加到路由器历史记录

Question

我正在使用 Vue Router 构建一个应用程序，该应用程序使用“外部”站点获取登录凭据。它基本上看起来像这样：

Home.Vue

<template>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {

      }
    },
    created() {
      window.location = 'https://third_party_site.com?nextpage=http://my_site.com/#/entry'
    }
  }
</script>

<style scoped>

</style>

此third_party_site.com 处理身份验证并将JWT 作为结果URL 中的查询字符串发回。当我尝试使用导航守卫（如下所示）获取查询字符串时，Vue 路由器只查看路由器的历史记录。

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Entry from '@/components/Entry'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/entry',
      name: 'Entry',
      component: Entry,
      beforeEnter: (to, from, next) => {
        console.log('to',to)
        console.log('from',from)
        console.log('next',next)
        next()
      },
      meta: {
        title: 'Entry'
      }
    },
  ]
})

控制台打印预期的“to”位置，但“from”位置是基本路径“/”，并且没有查询参数。如何获取“外部”路由以便访问查询参数？生成的“来自”的 console.log 如下。

from 
  {name: null, meta: {…}, path: "/", hash: "", query: {…}, …}
    fullPath: "/"
    hash: ""
    matched: []
    meta: {}
    name: null
    params: {}
    path: "/"
    query: {}
    __proto__: Object

在询问之前，必须以这种方式构建处于当前状态的应用程序，并且我无权访问外部站点。

Answer 1

这里在黑暗中狂野射击，但您的 nextpage 查询参数中的 # 可能会与远程站点混淆。

它会看到什么

QUERY    => nextpage=http://my_site.com/
FRAGMENT => #/entry

所以它会重定向回http://my_site.com/，因为它可能会忽略任何片段。

您应该正确编码值，例如

window.location = 'https://third_party_site.com/?nextpage=' + 
    encodeURIComponent('http://my_site.com/#/entry')

这将产生nextpage=http%3A%2F%2Fmy_site.com%2F%23%2Fentry