27

I tried to go to 'www.mytargeturl.org' using router.go, router.push, router.replace and window.location.href to redirect my vuejs app but i always get myVueapp.com/www.mytargeturl.org Here's my route:

  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

]

3
  • just use a regular a tag. vue-router is for navigating inside your app
    – Eric Guan
    Commented Jun 16, 2017 at 18:41
  • 1
    It's simple: don't use vue-router, because it will redirect to an internal link (i.e. within the app). Use window.location and that should work just fine.
    – Terry
    Commented Jun 16, 2017 at 18:41
  • I have already tried window.location before posting here but no success. Here's my sample: jsfiddle.net/alvirtuoso/dkb1d13h
    – codely
    Commented Jun 16, 2017 at 21:50

4 Answers 4

44

Agreed with the people in other comments. Vue's philosophy is not to solve already solved problems. Same here. Just use an ordinary a tag for the link whenever possible. If you need to go through the router though, use Navigation Guards:

{
    path: '/redirect',
    beforeEnter(to, from, next) {
        // Put the full page URL including the protocol http(s) below
        window.location.replace("https://example.com")
    }
}
5
  • 2
    This still directs me internally like myvueapp.com/www.mytargeturl.org
    – codely
    Commented Jun 16, 2017 at 21:58
  • 2
    Oh, I'm sorry, you need to use full page url with protocol e.g. google.com
    – damienix
    Commented Jun 17, 2017 at 9:41
  • 1
    I suggest adding this detail to this answer to make it clearer
    – papillon
    Commented Aug 13, 2018 at 7:57
  • Blows up in Typescript version of Vue Error TS2322 (TS) Type '"example.com"' is not assignable to type 'Location'. D:\TFS\EricSandBoxVueTsFromTroy\clientapp\tsconfig.json D:\TFS\EricSandBoxVueTsFromTroy\clientapp\src\router\index.ts 145 Active Commented Dec 4, 2020 at 21:26
  • Thanks, I've adjusted the code to use location.redirect which I think it the most appropriate in that scenario.
    – damienix
    Commented Dec 5, 2020 at 23:03
13

Found the solution. By adding http in my target url, all is well! Like this window.location = 'http://mytargeturl.org"

This seems to be universal javascript truth not just vue.

1
  • So you are saying { path: '/a', redirect: 'http://www.mytargeturl.org' } worked for you?! It doesn't for me.
    – Aidin
    Commented May 21, 2021 at 16:28
7

No need to use navigation guards in this case, cleaner to use dynamic redirect right there in route config

routes:[
  {
    path: '/redirect-example',
    redirect: (to: Route) => {
      window.location.href = 'http://example.com'
      return '/redirecting' // not important since redirecting
    }
  }
]
2
  • Blows up in typescript verison of vueapp: ERROR in D:/TFS/EricSandBoxVueTsFromTroy/clientapp/src/router/index.ts(143,24): 143:24 Cannot find name 'Route'. Commented Dec 4, 2020 at 21:27
  • @Eric Brown it's a typescript thing, import the type, or if you are running with vanilla is, then drop it altogether
    – Be Kind
    Commented Dec 6, 2020 at 9:47
2

In your route, set a meta property with the redirection url

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

And setup a router guard function to do the work:

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();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.