使用vue-router，為什么我的組件無法加載

Question

為什么不加載我的組件？

根網址

HTTP：//本地主機：8080 /

必須顯示欄嗎？

謝謝您的幫助

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 />組件，並且所有其他導入均有效，則它應該可以工作。