1

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',
      component: Post
    },
    {
      path: '/:req_no',
      name: 'Detail',
      component: 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!!

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

2 Answers 2

3

You cannot use the router for a different domain.

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

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

window.location = `https://dataURL/detail.php/${req_no}`;
Sign up to request clarification or add additional context in comments.

3 Comments

Hi @Meligy, thanks for your answer. Two more questions! - How can I deliver params? url/${req.no} and params {ruq.no : int} seem working different... - How can I render the page? because the URL is just data, I need to make template. I'm very new to Vue.js :'(. I'd be appreciated for your further answer.
For first question, you just use the same way in the answer. For second question, if the URL is just data, it means you might need to create a component to show it or something. Maybe add it to an iframe instead of redirecting to it. Depends on what this data is really, because for data usually you just make an HTTP request and render the results using a component not redirect to the URL.
I see your comment on the other answer that copied me. If it's an API, you make an AJAX request (HTTP request using JavaScript) instead of redirect to it. See the official docs here: vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
0

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};

3 Comments

Hi ittus, I'm running my main app on local host. So, your advice seems not working :'(. Any other recommendation?
If it's the same domain, can you change dataURL to localhost:8080, too, because it makes confuse between dataURL and localhost:8080.
Thank you for the further answer. The thing is the url is API. So I have to template the data..and also how can I pass params if I use window.location? Thanks again!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.