Vue.js 我无法在Vue JS中移动其他路径

我是Vue JS新手，我正在用Vue JS制作一个简单的页面。这是我的密码：

main.js

import Vue from 'vue'
import App from './App.vue'
import PokeProfile from './components/PokeProfile.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueRouter from 'vue-router';

Vue.use(VueRouter)
Vue.use(ElementUI)

const router = new VueRouter({
  routes: [
    {path: '/', component: App},
    {path: '/pokemon/:id', component: PokeProfile},
  ],
  mode: 'history'
})

//Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App),
  router: router
})

App.js

从“./components/PokeItem.vue”导入PokeItem
从“axios”导入axios
导出默认值{
名称：“应用程序”，
组成部分：{
博基特姆
},
数据（）{
返回{
口袋妖怪：[]
}
},
创建（）{
axios.get（“http://localhost:3000")
.然后（res=>this.pokemons=res.data）
.catch（err=>{console.log（err）}）
}
}
div{
显示器：flex；
证明内容：中心；
}

PokeItem.js

{{pokemon.name}
导出默认值{
数据（）{
返回{}
},
道具：{
口袋妖怪：{
类型：对象，
必填项：true
}
},
计算：{
口袋妖怪{
返回“/pokemon/${this.pokemon.national\u id}”`
}
}
}

PokeProfile.js

你好，口袋妖怪
导出默认值{
}

---

这里的问题是，当我单击PokeItem.js文件中的某个项目时，我无法移动到PokeProfile.js。有什么问题吗？我已经检查了与路由相关的代码部分，但没有发现任何问题

Vue路由器使用动态组件（

）呈现路由的组件。通常，您会在

app.vue

的模板中找到此组件。由于您没有

组件，Vue路由器不知道在何处渲染路由组件

试试这个：

---

---

/./App.vue

编辑是为了允许堆栈溢出正确地突出显示问题中的代码。正确地突出显示语法是很有用的，这样人们一眼就能理解正在发生的事情。

// main.js

import Home from './components/Home.vue'

const router = new VueRouter({
  routes: [
    {path: '/', component: Home},
    {path: '/pokemon/:id', component: PokeProfile},
  ],
  mode: 'history'
})

// components/Home.vue

// your old App.vue

// ./App.vue
<template>
  <main>
    <router-view></router-view>
  </main>
</template>