单击时如何在Vue.js中重定向到其他URL?

时间:2019-05-16 04:12:41

标签: javascript vue.js vuejs2 vuex vue-router

我正在用Vue.js制作一个留言板,并试图在单击每个帖子时使页面重定向。

我已经安装了vue-route和axios。

在index.js中,

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

在post.vue中

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

.
.
.

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

Detail.vue

<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放在哪里(在post.Vue,detailPost()或Detail.vue中的函数中)

如果将其放在函数中,我将得到 http://localhost:8080/#/http://dataURL/detail.php/2

API指南说我必须使用参数。

能否请您帮我解决?非常感谢!

2 个答案:

答案 0 :(得分:1)

您不能将路由器用于其他域。

查看此答案:https://stackoverflow.com/a/41654493/146656

您可以做的就是简单地使用香草JS:

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

答案 1 :(得分:-1)

https://dataURL/detail.php与您的主应用程序位于同一域吗?

请尝试:

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

如果是其他域,则可以使用window.location

  

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