Vue2使用location.href导航到外部URL

时间:2017-06-16 18:37:52

标签: vue.js vuejs2 vue-router

我尝试使用router.go,router.push,router.replace和window.location.href转到'www.mytargeturl.org'来重定向我的vuejs应用程序,但我总是得到myVueapp.com/www.mytargeturl。组织 这是我的路线:

  routes:[
{path: '/', component: App,
  children:[
    {
      path: 'detail',
      component: ItemDetail,
      props: true
    },
    {
      path: 'search',
      component: Middle
    }       
  ]
},   
{
  path: '/test', component: Test
},
{ path: '/a', redirect: 'www.mytargeturl.org' } // also tried this but didnt work

4 个答案:

答案 0 :(得分:16)

在评论中与人们达成一致。 Vue的理念不是解决已经解决的问题。同样在这里。只要有可能,只需使用普通的a标记作为链接。如果您需要通过路由器,请使用enter image description here

{
    path: '/a',
    beforeEnter(to, from, next) {
        // Put the full page url including the protocol http(s) below
        window.location = "http://example.com"
    }
}

答案 1 :(得分:5)

找到解决方案。通过在我的目标网址中添加 http ,一切都很好!像这样 window.location = 'http://mytargeturl.org"

这似乎是普遍的javascript真理,而不仅仅是vue。

答案 2 :(得分:1)

在这种情况下,无需使用导航卫士,可以更清洁地在路线配置中使用dynamic redirect

routes:[
  {
    path: '/redirect-example',
    redirect: (to: Route) => {
      window.location.href = 'http://example.com'
      return '/redirecting' // not important since redirecting
    }
  }
]

答案 3 :(得分:0)

在您的路线中,使用重定向网址设置元属性

{
  name: "Shop",
  path: "/shop",
  component: {},
  meta: { RedirectExternalUrl: "https://mystore.com" },
},

并设置路由器保护功能来完成工作:

router.beforeEach(async (to, from, next) => {

    // External redirect
    if (to.matched.some((record) => record.meta.RedirectExternalUrl)) {
        const url: string = to.meta.RedirectExternalUrl as string;
        window.location.replace(url);
        return;
    }

    next();
});