다른 페이지로 Vue.js 리디렉션


133

에 방향을 바꾸고 싶습니다 Vue.js바닐라 자바 ​​스크립트와 비슷한

window.location.href = 'some_url'

Vue.js에서 어떻게 이것을 달성 할 수 있습니까?


vue router '/ my / vuerouter / url'에 정의 된 경로로 리디렉션 하시겠습니까? 아니면 브라우저가 some-url.com으로 리디렉션 됩니까 ?
hitautodestruct

답변:


187

당신이 사용하는 경우 vue-router, 당신은 사용해야하는 router.go(path)특정 경로로 이동합니다. 를 사용하여 구성 요소 내에서 라우터에 액세스 할 수 있습니다 this.$router.

그렇지 않으면 window.location.href = 'some url';단일 페이지가 아닌 앱에 적합합니다.

편집 : router.go()VueJS 2.0에서 변경되었습니다. router.push({ name: "yourroutename"})또는 router.push("yourroutename")지금 사용하여 리디렉션 할 수 있습니다 .

https://router.vuejs.org/guide/essentials/named-routes.html


2
내 경우에는 사용은 다른 비 단일 페이지로 직접하는 것입니다
지미 Obonyo ABOR

8
나는 점점되었습니다 Uncaught ReferenceError: router is not defined오류는 어떻게 구성 요소에 라우터를 주입?
Saurabh

@felipekm 무엇? 그게 똑같지 않니?
Barry D.

3
router.push ( "yourroutename")는 router.push ({name : "yourroutename")와 다릅니다. 첫 번째는 경로를 직접 정의합니다. 두 번째는 지정된 이름의 경로를 사용합니다.
pinki

8
this.$router.push('routename)
ka_lin

84

문서에 따르면 router.push는 선호하는 방법처럼 보입니다.

다른 URL로 이동하려면 router.push를 사용하십시오. 이 메소드는 새 항목을 히스토리 스택으로 푸시하므로 사용자가 브라우저 뒤로 단추를 클릭하면 이전 URL로 이동합니다.

출처 : https://router.vuejs.org/en/essentials/navigation.html

참고 : Webpack 및 구성 요소 설정, 단일 페이지 앱 (Main.js를 통해 라우터를 가져 오는 위치)에서 다음과 같이 말하여 라우터 기능을 호출해야했습니다.

this.$router

예 : 조건이 충족 된 후 "홈"이라는 경로로 리디렉션하려는 경우 :

this.$router.push('Home') 

1
이 질문은 컴파일 (webpack)과 아무 관련이 없습니다.
Jimmy Obonyo Abor

12
downvote에 감사드립니다. 비록 대부분의 사람들이 vue cli, webpack, router 및 store / vuex로 개발할 것이지만 라우터를 호출 할 수없는 문제가 발생할 수 있습니다.
Dave Sottimano 2012

1
@JimmyObonyoAbor hiyo comment na downvote utasema unamlipa haha
Cholowao

@Cholowao 그는 그, 사와 tushasikia! 난 당신이 기술을 가지고 있으면 핑 반응 kazi있어 ...
지미 Obonyo Abor

1
@JimmyObonyoAbor
Cholowao

41

그냥 사용하십시오 :

window.location.href = "http://siwei.me"

vue-router를 사용하지 마십시오. 그렇지 않으면 " http://yoursite.com/#!/http://siwei.me " 로 리디렉션됩니다

내 환경 : node 6.2.1, vue 1.0.21, Ubuntu.


1
나는 왜 큰 따옴표로 묶어야하는지 아무 이유도 보이지 않습니다 ..?
Moritz

1
실제로 standardjs 는 "이스케이프를 피하기 위해 문자열에 작은 따옴표를 사용하십시오"라고 말합니다.
Moritz

이것은 얼마 전이지만 실제로 작은 따옴표를 사용 하여이 문제를 해결했지만 큰 따옴표도 작동해야하며 복잡한 링크에서 유용 할 수 있습니다.
Jimmy Obonyo Abor

vue 버전을 먼저 확인하십시오. 초기 버전에서 vue는 코드 규칙을 신경 쓰지 않을 것입니다. 그러나 내 환경에서는 코드 규칙으로 인해 컴파일 오류가 발생합니다 (es6 컴파일에서 vanilla js로). 'ES6'노드 모듈을 사용하지 않았다면 문제가 없을 수 있습니다.
Siwei Shen 申思维

새 탭에서 열려면 어떻게해야합니까?
Fthi.a. Abadi

29

컴포넌트 스크립트 태그 안에 있으면 라우터를 사용하여 다음과 같은 작업을 수행 할 수 있습니다

this.$router.push('/url-path')

고마워, 간단하고 똑바로.
솔루션 정신



6

다른 페이지로 라우팅하려는 경우 this.$router.push({path: '/pagename'})

당신은 매개 변수와 함께 라우팅하려는 경우 this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})


5
window.location = url;

'url'은 리디렉션하려는 웹 URL입니다.


3

v- 바인딩을 템플릿에 직접 사용할 수도 있습니다 ...

<a :href="'/path-to-route/' + IdVariable">

:약어입니다 v-bind.


ES6 구문을 사용할 수도 있습니다 : : href = " `/path-to-route/${IdVariable}`"또는 여기에 언급 된대로 지정된 경로 ( router.vuejs.org/guide/essentials/named-routes.html ) : :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
mEnE

1

한 페이지 /a에서 다른 페이지로 영구적으로 리디렉션하려는 사람/b


redirect:추가 된 옵션 을 사용할 수 있습니다 router.js. 예를 들어 루트 또는 기본 URL을 입력 할 때 항상 사용자를 별도의 페이지로 리디렉션하려는 경우 /:

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      redirect: "/someOtherPage",
      name: "home",
      component: Home,
      // () =>
      // import(/* webpackChunkName: "home" */ "./views/pageView/home.vue"),

    },
   ]

0
<div id="app">
   <a :href="path" />Link</a>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          path: 'https://www.google.com/'
        }
      });
</script> enter code here

0

그럼, 내가 찾던 만했다 어디 를 넣어window.location.href 결론은 가장 빠르고 가장 빠른 리디렉션 방법이 경로에 있다는 것입니다.

이처럼 :

routes: [
    {
        path: "/",
        name: "ExampleRoot",
        component: exampleComponent,
        meta: {
            title: "_exampleTitle"
        },
        beforeEnter: () => {
            window.location.href = 'https://www.myurl.io';
        }
    }]

아마 누군가를 도울 것입니다 ..


0

원래 요청에 따라 유지하려면 :

window.location.href = 'some_url'

다음과 같이 할 수 있습니다 :

<div @click="this.window.location='some_url'">
</div>

이것은 Vue의 라우터를 사용하지는 않지만 "Vue.js에서 바닐라 자바 ​​스크립트와 유사하게 리디렉션"하려면이 방법이 효과적입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.