使用vue-router，为什么我的组件无法加载

Question

为什么我的组件无法加载？

根网址

  

http://localhost:8080/

必须只显示Bar吗？

感谢您的帮助

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home'
import Contact from '././components/Contact'

Vue.config.productionTip = false

Vue.use(VueRouter);

const Bar = { template: '<div>bar</div>' }

const routers = [
  { path: '/', component: Bar },
];

let router = new VueRouter({mode: 'history', routes: routers});

new Vue({
  router
}).$mount('#app')

Answer 1

可能的原因是

1. 您未在代码中正确导入路由器
2. 您不需要Vue.use(VueRouter)，只需将其传递给新的Vue对象参数

像这样纠正它

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'router'
import Home from './components/Home'
import Contact from '././components/Contact'

Vue.config.productionTip = false

const Bar = { template: '<div>bar</div>' }

const routers = [
  { path: '/', component: Bar },
];

let router = new VueRouter({mode: 'history', routes: routers});

new Vue({
  router
}).$mount('#app')

如果您的App.vue（在第2行导入）在其模板中具有<router-view />组件，并且所有其他导入均有效，则它应该工作。