【问题标题】:How to redirect in Vue.js to different url when clicked?单击时如何在 Vue.js 中重定向到不同的 url?
【发布时间】:2019-05-16 04:12:41
【问题描述】:

我正在使用 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}`
        })
      }

详细.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 指南说我必须使用参数。

你能帮我解决哪里吗?非常感谢!!

【问题讨论】:

  • 最简单的就是放一个锚标签和href=yourlink

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


【解决方案1】:

您不能将路由器用于不同的域。

看到这个答案:https://stackoverflow.com/a/41654493/146656

你可以做的是简单地使用vanilla JS来做:

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

【讨论】:

  • 嗨@Meligy,感谢您的回答。还有两个问题! - 我如何提供参数? url/${req.no}params {ruq.no : int} 似乎工作不同... - 我怎样才能呈现页面?因为 URL 只是数据,我需要制作模板。我对 Vue.js 很陌生 :'(。感谢您的进一步回答。
  • 对于第一个问题,您只需在答案中使用相同的方式。对于第二个问题,如果 URL 只是数据,这意味着您可能需要创建一个组件来显示它或其他东西。也许将它添加到 iframe 而不是重定向到它。取决于这些数据的真实情况,因为对于数据,通常您只需发出 HTTP 请求并使用不重定向到 URL 的组件来呈现结果。
  • 我看到您对复制我的其他答案的评论。如果它是一个 API,则您发出 AJAX 请求(使用 JavaScript 的 HTTP 请求)而不是重定向到它。在此处查看官方文档:vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
【解决方案2】:

https://dataURL/detail.php 是否与您的主应用在同一个域中?

请尝试:

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

如果是不同的域,你可以使用window.location

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

【讨论】:

  • 嗨 ittus,我正在本地主机上运行我的主应用程序。所以,你的建议似乎不起作用:'(。还有其他建议吗?
  • 如果是同一个域,你能不能把dataURL也改成localhost:8080,因为这会混淆dataURLlocalhost:8080
  • 感谢您的进一步回答。问题是 url 是 API。所以我必须对数据进行模板化。如果我使用window.location,我该如何传递参数?再次感谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-19
  • 1970-01-01
  • 2018-10-14
  • 1970-01-01
  • 1970-01-01
  • 2013-03-04
相关资源
最近更新 更多