I have a specific element:
Hashtag.vue:
<template>
<router-link :to="getTo"
custom v-slot="{ navigate }">
<div role="link" @click="navigate">
{{text}}</div>
</router-link>
</template>
<script>
export default {
props: {
text: {
type: String
},
date: {
type: String
},
link: {
type: String,
}
},
created() {
console.log("this link: " + this.link);
},
computed: {
getTo: function() {
console.log("text: " + this.text);
console.log("link: " + "hashtag/" + this.text);
return "hashtag/" + this.text;
}
}
}
</script>
Now, let's incorporate it in HashtagsList.vue:
<template>
<div>
<Hashtag text="test1"/>
<Hashtag text="test2"/>
<Hashtag text="test3"/>
<Hashtag text="test4"/>
<Hashtag text="test5"/>
</div>
</template>
Yet, I encounter an issue when clicking a hashtag from the location of
http://localhost:8080/hashtag/sometag
This causes redirection to
http://localhost:8080/hashtag/hashtag/sometag
Instead of the desired target:
http://localhost:8080/hashtag/sometag
What steps can I take to rectify this?
http://localhost:8080/hashtag/test2