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'
      }
    },
  ]
})

控制台将打印预期的“到”位置，但是“从”位置是基本路径“ /”，并且没有查询参数。如何获得“外部”路由，以便可以访问查询参数？产生的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

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

1 个答案: