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!!
href=yourlink