javascript - How to redirect in Vue.js to different url when clicked? - Stack Overflow

admin管理员组

文章数量:1397049

I'm making a post board with Vue.js and trying to make the page redirected when each post is clicked.

I've installed vue-route and axios.

In index.js,

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

In post.vue

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

.
.
.

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

In 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>

I'm not sure where to put the url (in the function in post.Vue, detailPost() or in Detail.vue)

If I put it in the function, I get http://localhost:8080/#/http://dataURL/detail.php/2

The API guide says I must use the params.

Could you please help me where to fix? Thanks alot!!

I'm making a post board with Vue.js and trying to make the page redirected when each post is clicked.

I've installed vue-route and axios.

In index.js,

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

In post.vue

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

.
.
.

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

In 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>

I'm not sure where to put the url (in the function in post.Vue, detailPost() or in Detail.vue)

If I put it in the function, I get http://localhost:8080/#/http://dataURL/detail.php/2

The API guide says I must use the params.

Could you please help me where to fix? Thanks alot!!

• javascript
• vue.js
• vuejs2
• vuex
• vue-router

Share Improve this question Follow asked May 16, 2019 at 4:12 Soomin ShinSoomin Shin 4711 gold badge22 silver badges66 bronze badges 1

• The simplest thing would just be to put an anchor tag and href=yourlink – Michael Commented May 16, 2019 at 5:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You cannot use the router for a different domain.

See this answer: https://stackoverflow./a/41654493/146656

What you can do is simply use vanilla JS to do it:

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

Is https://dataURL/detail.php on same domain with your main app?

Please try:

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

If it's different domain, you can use window.location

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

本文标签： javascriptHow to redirect in Vuejs to different url when clickedStack Overflow