я новичок в vue, и я пытаюсь перейти с одной страницы на другую (с домашней страницы в компоненте на страницу профиля в представлении), используя <route-link>, но он меняет только URL-адрес, а не содержимое страницы, ниже всего моего кода реализация для app.vue, profile.vue, home.vue, main.js и route.js, и я действительно не знаю, где я ошибся, помогите, пожалуйста? и спасибо заранее
Home.vue
<template>
<div class = "container" width=800px>
<ul>
<li>
{{question1.question}}
<br>
<br>
</li>
</ul>
<b-row id = "asked-info">
<p>Asked by: </p>
<div id = "user" v-for = "(answer, index) in answers"
:key = "index">
<router-link to = "/profile"> {{ answer }}</router-link>
</div>
</b-row>
</div>
</template>
<script>
export default {
props: {
question1: Object
},
data() {
return {
selectedIndex: null,
};
},
computed: {
answers() {
let answers = [this.question1.correct_answer];
// answers.push(this.question1.correct_answer);
return answers;
},
},
}
</script>
Profile.vue
<template>
<div class = "container" width=800px>
<b-row id = "asked-info">
<p>Welcome to the profile of: </p>
<div id = "user" v-for = "(answer, index) in answers"
:key = "index">
{{ answer }}
</div>
</b-row>
</div>
</template>
<script>
export default {
props: {
question1: Object
},
computed: {
answers() {
let answers = [this.question1.correct_answer];
// answers.push(this.question1.correct_answer);
return answers;
},
},
}
</script>
App.vue
<template>
<div id = "app">
<Header />
<b-container class = "bv-example-row">
<b-row>
<b-col cols = "8">
<h1> Recently Asked </h1>
<Home
v-for = "(question1,index) in questions" :key = "index"
:question1 = "questions[index]"
/>
</template>
<script>
import Home from './components/Home.vue'
import Header from './components/Header.vue'
export default {
name: 'App',
components: {
Header,
Home,
},
data(){
return{
questions: [],
index: 0
}
},
</script>
routes.js
import Profile from './components/Profile.vue';
import Home from './components/Home.vue';
export const routes = [
{ path: "/", component: Home},
{ path: "/Profile", component: Profile },
]
main.js
import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue} from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import {routes} from './routes'
import VueRouter from "vue-router";
Vue.config.productionTip = false
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes
})
Vue.use(BootstrapVue)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
В вашем app.vue отсутствует компонент router-view
:
<template>
<div id = "app">
<Header />
<b-container class = "bv-example-row">
<router-view></router-view>
</b-container>
<b-row>
<b-col cols = "8">
<h1> Recently Asked </h1>
<Home
v-for = "(question1,index) in questions" :key = "index"
:question1 = "questions[index]"
/>
</template>
<script>
import Home from './components/Home.vue'
import Header from './components/Header.vue'
export default {
name: 'App',
components: {
Header,
Home,
},
data(){
return{
questions: [],
index: 0
}
},
</script>
Вам не хватает тега <router-view></router-view>
, где будет отображаться компонент, соответствующий маршруту. Просто включите его на свою страницу home.vue, где хотите.