I am currently developing a post board application using Vue.js and I am facing an issue with redirecting the page when a user clicks on each post.
To handle this, I have made use of vue-route and axios in my project.
Here is a snippet from index.js,
export default new Router({
route: [
{
path: '/',
name: 'Post',
component: Post
},
{
path: '/:req_no',
name: 'Detail',
component: Detail
},
]
})
Within the post.vue file,
<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 am confused about where to specify the URL (either in the function within post.Vue - detailPost(), or in Detail.vue).
If I include it in the function, I observe
http://localhost:8080/#/http://dataURL/detail.php/2According to the API documentation, it is recommended to utilize the params.
Please advise me on how to resolve this issue. Thank you!