Programing

Vue2는 위치가 있는 외부 URL로 이동한다.href

c10106 2022. 4. 27. 21:27
반응형

Vue2는 위치가 있는 외부 URL로 이동한다.href

나는 라우터.go, 라우터를 사용하여 'www.mytargeturl.org'으로 가려고 했다.push, router.user 및 window.location.href 내 vuejs 앱을 리디렉션하는 것은 좋지만 나는 항상 myVueapp.com/www.mytargeturl.org을 얻는다. 내 경로:

  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

]

다른 논평에서 사람들과 일치했다.이미 해결된 문제를 해결하는 것이 부에의 철학은 아니다.저도 마찬가지에요.그냥 평범한 것을 써라.a가능하면 링크에 태그를 추가하십시오.라우터를 통과해야 하는 경우, 탐색 가드를 사용하십시오.

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

해결책을 찾았다.내 목표 URL에 http를 추가하면 모든 것이 잘 된다!이것처럼.window.location = 'http://mytargeturl.org"

이것은 단지 vue만이 아닌 보편적인 javascript 진실인 것 같다.

이 경우에는 내비게이션 가드를 사용할 필요가 없으며, 경로 구성에서 바로 동적 리디렉션을 사용할 수 있도록 클리너

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

경로에서 리디렉션 URL을 사용하여 메타 속성을 설정하십시오.

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

참조URL: https://stackoverflow.com/questions/44595929/vue2-navigate-to-external-url-with-location-href

반응형