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

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

에서 리디렉션을 만들고 싶다.Vue.js바닐라 자바스크립트와 비슷한

window.location.href = 'some_url'

Vue.js에서 내가 어떻게 이것을 성취할 수 있을까?

사용 중인 경우vue-router, 당신은 사용해야만 한다.router.go(path)특정 경로로 이동하십시오.라우터는 다음을 사용하여 구성 요소 내에서 액세스할 수 있다.this.$router.

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

편집:router.go()VueJS 2.0에서 변경됨.사용할 수 있다$router.push({ name: "yourroutename"})아니면 그냥router.push("yourroutename")이제 방향을 바꾸자.

문서화

참고: 컨트롤러 사용 시:this.$router.push({ name: 'routename' })

문서에 따르면, 라우터.푸시는 선호되는 방법처럼 보인다.

다른 URL로 이동하려면 router.push를 사용하십시오.이 방법은 새로운 항목을 기록 스택에 밀어넣기 때문에 사용자가 브라우저 뒤로 버튼을 클릭하면 이전 URL로 이동된다.

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

FYI : 웹팩 & 컴포넌트 설정, 싱글 페이지 앱(Main.js를 통해 라우터를 가져오는 곳) 나는 다음과 같이 말하면서 라우터 기능을 호출해야 했다.

this.$router

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

this.$router.push('Home') 

그냥 사용:

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

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

내 환경: 노드 6.2.1, vue 1.0.21, Ubuntu.

구성 요소 스크립트 태그 내에서 라우터를 사용하여 이와 같은 작업을 수행할 수 있음

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

다른 페이지로 라우트하려면 다음을 사용하십시오.

this.$router.push({path: '/pagename'});

매개 변수가 있는 다른 페이지로 라우트하려면 다음을 사용하십시오.

this.$router.push({
    path: '/pagename', 
    params: {
         param1: 'value1', 
         param2: 'value2'
    }
});

이것도 먹어볼 수 있어...

router.push({ name: 'myRoute' })

단순한 라우팅일 뿐:

this.$router.push('Home');

한 페이지에서 영구 리디렉션을 원하는 경우/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"),

    },
   ]

window.location = url;

'redit'는 리디렉션할 웹 URL이다.

또한 다음과 같이 v-bind를 템플릿에 직접 사용할 수 있다.

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

그:의 약칭이다v-bind.

그래서, 내가 찾고 있던 것은 오직 어디에다 그 집을 놓아둘 것인가 하는 것이었다.window.location.href그리고 내가 도달한 결론은 리디렉션하는 가장 빠르고 좋은 방법은 경로에 있다는 것이었다(그런 식으로, 우리는 리디렉션하기 전에 어떤 것도 로드하기를 기다리지 않는다).

다음과 같은 경우:

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

아마 누군가에게 도움이 될거야..

이 달러화푸시를 사용하여 vue.js의 페이지를 리디렉션할 수 있음

this.$router.push(url);

예를 들어보자.$162.csv 홈'; 이 방법은 페이지를 새로 고치지 않는다.

원래 요청에 따라 계속 진행하려면:

window.location.href = 'some_url'

이런 일을 할 수 있다.

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

이것은 Vue의 라우터를 사용하는 것을 이용하지 않지만, 만약 당신이 "바닐라 자바스크립트와 유사한 Vue.js에서 리디렉션을 만들기를 원한다면, 이것은 효과가 있을 것이다.

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

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

api에서 특정 페이지 가져오기 가장 쉬운 방법은 캐시를 손상시킬 URL에 다른 매개 변수를 추가하는 것이다.

router.replace(data.current + '?t=' + (새로운 날짜()).getTime()

예를 들면

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

axios
    .get('http://domazin.com/currentpage')
    .then(response => {
     const data = response.data
       if (to.path != data.current) {
              router.replace(data.current + '?t=' + (new Date()).getTime())
       } else {
          next()
       }
    })
    .catch(error => {
        console.log(error)
});

);

Vue3.js 리디렉션

main.ts에서 이 방법을 사용하여 Vue3 js 글로벌 리디렉션을 정의할 수 있다.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.config.globalProperties.$redirect = (page) => {router.push(page)}
app.use(router).mount('#app')

구성 요소

<button @click="$redirect('/login')" type="button" class="btn ">Login</button>

나는 내가 사용하고 있는 CRM에 자바스크립트를 통해 삽입한 커스텀 버튼에서 리디렉션을 하고 싶었다.리디렉션을 수행하려면 다음 스크립트를 사용하십시오.여기의 나머지 답변들과 다른 점은 내가 필요한 라우터에 도달하기 위해서는 앱이 필요하다는 것이다.내 시나리오의 개체를 보려면 콘솔에서 비슷한 내용을 살펴보십시오.

var url = "/my-relative-path-url";    
<button onclick="app.__vue__.$router.push(\'' + url + '\');">Click Me</button>

나는 Vue3를 사용하고 있고 이것은 나에게 효과가 있다.

router.push({ name: 'myRoute' })

참조URL: https://stackoverflow.com/questions/35664550/vue-js-redirection-to-another-page