Vue: how to navigate to specific user's profile - vue.js

Question

i have code below and i want to navigate the user's profile when click on the name after asked by, i tried code below but it's not working and my json file structured as below
**
questions:Array[10] 0:Object category:"General Knowledge" user:"Saffron" difficulty:"medium" incorrect_answers:Array[3] 0:"Cinnamon" 1:"Cardamom" 2:"Vanilla" question:"What is the world's most expensive spice by weight?" type:"multiple"
**
<template>
<div class="container" width=800px>
<b-row>
<b-col cols="8">
<h1> Recently Asked </h1>
<ul class="container-question" v-for="(question1,index) in questions" :key="index"
>
<li v-if="answered" >
{{question1.question.selectedAnswer[index]}}
<li v-else >
{{question1.question}}
<b-row id="asked-info">
<p>Asked by: </p>
<div
id="user"
v-for="(answer, index) in answers(question1)"
:key="index"
>
<router-link to='/profile'> {{ answer }} </router-link>
</div>
</b-row>
<b-row>
<div class="category" v-for="(category,index) in category(question1)" :key="index" #click="selectedAnswer(index)">
<mark> {{ category }} </mark>
</div>
<b-button class="outline-primary" style="margin:auto;">Answer</b-button>
</b-row>
</li></ul>
</b-col>
<b-col>
<div class="ask-button">
<b-button href="#" class="primary">Ask Question</b-button>
</div>
<div>
<b-card
title="Card Title"
style="max-width: 20rem;"
class="mb-2"
>
<b-card-text>
Some quick example text to build on the card title and make up the bulk of the card's content.
</b-card-text>
</b-card>
</div>
<div>
<b-card
title="Card Title"
style="max-width: 20rem;"
class="mb-2"
>
<b-card-text>
Some quick example text to build on the card title and make up the bulk of the card's content.
</b-card-text>
</b-card>
</div>
</b-col>
</b-row>
<router-view />
</div>
</template>
<script>
export default {
data(){
return{
questions: [],
answered: null,
index: 0,
selectedIndex: null,
}
},
watch: {
question1: {
handler() {
this.selectedIndex = null;
this.answered = false;
},
},
},
methods: {
answers(question1) {
let answers = [question1.correct_answer];
return answers;
},
category(question1){
let category = [...question1.incorrect_answers];
return category
},
selectedAnswer(index) {
this.selectedIndex = index;
this.answered = true;
},
// filteredCategory(question1){
// return (question1.filter((question) => question.incorrect_answers == "Kfc"));
// },
},
mounted: function(){
fetch('https://opentdb.com/api.php?amount=10&category=9&difficulty=medium&type=multiple',{
method: 'get'
})
.then((response) => {
return response.json()
})
.then((jsonData) => {
this.questions = jsonData.results
})
}
}
</script>
routes.js
import question from './views/question.vue';
import App from './App.vue';
import Register from '#/components/Register'
import Login from '#/components/Login'
import Logout from '#/components/Logout'
import profile from '#/components/profile'
import contactus from '#/views/contactus'
export const routes = [
{ path: "/question", component: question },
{ path: "/", component: App },
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/logout',
name: 'Logout',
component: Logout
},
{
path: '/profile',
name: 'profile',
component: profile
},
{
path: '/contactus',
name: 'contactus',
component: contactus
},
]

Answer 1

There are a few things I want to point out here, you don't have to implement all of these, but understand what you are doing wrong:
You are missing the <router-view> tag, which is where you want your component to render because you use <router-link>
params are ignored if a path is provided. Instead, you need to provide the name of the route or manually specify the whole path with any parameter. Here for your reference: https://router.vuejs.org/guide/essentials/navigation.html
if you don't v-bind your property to, it will treat the value as a string. So you want to go like this <router-link :to="yourLink" />
In your case, you want to use <router-link :to="" /> with a dynamic string. There are 2 ways to achieve this: Declarative (<router-link>) and Programmatic (router.push)
Declarative:
<router-link> is like an anchor tag, so you should return a string.
<router-link :to="yourLink"> {{ userr }} </router-link>
computed: {
yourLink() {
return `/profile/${user(question1)}`
}
}
Programmatic
When you do a router.push, you are not doing a “link” anymore. It’s just a click event at that point. So change your router-link to a button with a click event
<button #click="yourLink"> {{ userr }} </button>
methods: {
yourLink() {
this.$router.push({name:'yourComponentName'} ,params:{user(question1)}})
}
}
EDIT
In your router.js:
{
path:'/profile/:user',
name: 'profile,
component: profile,
props: true
}
In your router-link:
<router-link :to="`/profile/${user(question1)}`"> {{ userr }} </router-link>
Then in your profile.vue, you can query the params by this.$route.params.user, for example, if you want to output it in a <p> tag:
<p>{{ this.$route.params.user }}</p>