Vue.js를 다른 페이지로 리디렉션
Vue.js
바닐라 자바 스크립트와 유사한 리디렉션을 만들고 싶습니다.
window.location.href = 'some_url'
Vue.js에서 어떻게 이것을 달성 할 수 있습니까?
당신이 사용하는 경우 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
문서에 따르면 router.push는 선호하는 방법처럼 보입니다.
다른 URL로 이동하려면 router.push를 사용하십시오. 이 방법은 새 항목을 히스토리 스택에 푸시하므로 사용자가 브라우저 뒤로 버튼을 클릭하면 이전 URL로 이동합니다.
출처 : https://router.vuejs.org/en/essentials/navigation.html
참고 : Webpack 및 구성 요소 설정, 단일 페이지 앱 (Main.js를 통해 라우터를 가져 오는 곳), 다음과 같이 말하여 라우터 기능을 호출해야했습니다.
this.$router
예 : 조건이 충족 된 후 "홈"이라는 경로로 리디렉션하려는 경우 :
this.$router.push('Home')
다음을 사용하십시오.
window.location.href = "http://siwei.me"
vue-router를 사용하지 마십시오. 그렇지 않으면 " http://yoursite.com/#!/http://siwei.me " 로 리디렉션됩니다.
내 환경 : node 6.2.1, vue 1.0.21, Ubuntu.
컴포넌트 스크립트 태그 안에있을 때 라우터를 사용하고 다음과 같이 할 수 있습니다.
this.$router.push('/url-path')
죽은 간단한 라우팅 :
this.$router.push('Home');
이것도 시도 할 수 있습니다 ...
router.push({ name: 'myRoute' })
window.location = url;
'url'은 리디렉션하려는 웹 URL입니다.
v-bind를 다음과 같이 템플릿에 직접 사용할 수도 있습니다.
<a :href="'/path-to-route/' + IdVariable">
의 :
약어입니다 v-bind
.
<div id="app">
<a :href="path" />Link</a>
</div>
<script>
new Vue({
el: '#app',
data: {
path: 'https://www.google.com/'
}
});
</script> enter code here
누군가 한 페이지 /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"),
},
]
다른 페이지로 라우팅하려는 경우 this.$router.push({path: '/pagename'})
매개 변수를 사용하여 라우팅하려는 경우 this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})
참고 URL : https://stackoverflow.com/questions/35664550/vue-js-redirection-to-another-page
'Programing' 카테고리의 다른 글
Spring MVC 테스트에서“Circular view path”예외를 피하는 방법 (0) | 2020.08.29 |
---|---|
한 목록에 다른 요소가 포함되어 있는지 확인 (0) | 2020.08.29 |
부모의 jQuery 부모 (0) | 2020.08.29 |
Xcode에서 후행 공백 제거 (0) | 2020.08.29 |
루비의 디렉토리를 재귀 적으로 나열하는 한 줄? (0) | 2020.08.29 |