programing

클릭 시 Vue.js에서 다른 URL로 리다이렉트하는 방법

randomtip 2022. 8. 17. 20:56
반응형

클릭 시 Vue.js에서 다른 URL로 리다이렉트하는 방법

Vue.js로 포스트보드를 만들고 있으며, 각 포스트를 클릭하면 페이지가 리다이렉트 됩니다.

vue-route와 axios를 설치했습니다.

index.js에서는

export default new Router({
  route: [
    {
      path: '/',
      name: 'Post',
      component: Post
    },
    {
      path: '/:req_no',
      name: 'Detail',
      component: Detail
    },
  ]
})

포스트에.표시하다

<div @click="detailPost(post.no)">{{post.title}}</div>

.
.
.

detailPost(req_no) {
    this.$router.push({
    path: `https://dataURL/detail.php/${req_no}`
        })
      }

상세.표시하다

<template>
    <div>
        {{contents}}
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'Datail',
    data() {
        return {
            req_no: this.$route.params.req_no,
            contents: {}
        }
    },
    created() {
      axios.get('https://dataURL/detail.php/', {
        params: {
          req_no: this.req_no
        }
      }).then(res => {
          this.contents = this.res.data
      });
    }
}
</script>

(포스트의 함수에 있는) URL을 어디에 넣어야 할지 모르겠습니다.Vue, detail Post() 또는 Detail.비디오)

함수에 넣으면...http://localhost:8080/#/http://dataURL/detail.php/2

API 가이드에 따르면 반드시 파라미터를 사용해야 합니다.

수리하는 것 좀 도와주시겠어요?정말 고마워!!

라우터는 다른 도메인에 사용할 수 없습니다.

다음 답변을 참조하십시오.https://stackoverflow.com/a/41654493/146656

Vanilla JS를 사용하여 실행할 수 있습니다.

window.location = `https://dataURL/detail.php/${req_no}`;

https://dataURL/detail.php메인 앱과 같은 도메인에 있습니까?

시험해 보세요:

this.$router.push({
  path: `/detail.php/${req_no}`
})

도메인이 다르면window.location

window.location =https://dataURL/detail.php/${req_no};

언급URL : https://stackoverflow.com/questions/56160738/how-to-redirect-in-vue-js-to-different-url-when-clicked

반응형