Javascript vue:导航到其他页面时，仅url发生更改

我是vue新手，我尝试使用从一个页面导航到另一个页面（从组件中的主页导航到视图中的配置文件页面），但它只更改url，而不更改页面内容，下面是我对app.vue、profile.vue、home.vue、main.js和routes.js的所有代码实现，我真的不知道我在哪里出错了，请提供帮助？先谢谢你

Home.vue


{{问题1.问题}






提问人：

{{答案}
导出默认值{
道具：{
问题1：目标
},
数据（）{
返回{
selectedIndex:null，
};
},
计算：{
答案（）{
让答案=[这个问题1.正确答案]；
//回答。推（这个问题1。正确答案）；
返回答案；
},
},
}
Profile.vue
欢迎访问以下个人资料：

{{答案}
导出默认值{
道具：{
问题1：目标
},
计算：{
答案（）{
让答案=[这个问题1.正确答案]；
//回答。推（这个问题1。正确答案）；
返回答案；
},
},
}
App.vue
最近问
从“./components/Home.vue”导入主页
从“./components/Header.vue”导入标题
导出默认值{
名称：“应用程序”，
组成部分：{
标题，
家
},
数据（）{
返回{
问题：[]，
索引：0
}
},
routes.js
从“/components/Profile.vue”导入配置文件；
从“/components/Home.vue”导入主页；
导出常量路由=[
{路径：“/”，组件：Home}，
{路径：“/Profile”，组件：Profile}，
]
main.js
从“Vue”导入Vue
从“./App.vue”导入应用程序
从“bootstrap vue”导入{BootstrapVue}
导入“bootstrap/dist/css/bootstrap.css”
导入“bootstrap vue/dist/bootstrap vue.css”
从“/routes”导入{routes}
从“vue路由器”导入VueRouter；
Vue.config.productionTip=false
Vue.use（VueRouter）
常量路由器=新的VueRouter({
模式：“历史”，
路线
})
Vue.use（BootstrapVue）
新Vue({
路由器，
渲染：h=>h（应用程序），
}).mount（“#app”）

在您的app.vue中缺少

路由器视图

组件：

<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>

最近问
从“./components/Home.vue”导入主页
从“./components/Header.vue”导入标题
导出默认值{
名称：“应用程序”，
组成部分：{
标题，
家
},
数据（）{
返回{
问题：[]，
索引：0
}
},

在你的app.vue中，你缺少

路由器视图

组件：

<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>

最近问
从“./components/Home.vue”导入主页
从“./components/Header.vue”导入标题
导出默认值{
名称：“应用程序”，
组成部分：{
标题，
家
},
数据（）{
返回{
问题：[]，
索引：0
}
},

您丢失了标记

，路由匹配的组件将在该标记处呈现。只需将其包含在您想要的home.vue页面中。

您丢失了标记

，路由匹配的组件将在该标记处呈现。只需将其包含在您想要的home.vue页面中即可