Vue路由器不会显示组件

时间:2020-01-04 02:45:54

标签: vue.js vue-router

我正在设置一个新的Vue.js + Vue Router应用程序,当我单击App.vue中设置的路由器链接时,内容没有显示出来。路由器和应用程序对象定义明确,我尝试打印它们。 index.html中的应用程序正在运行,因为我可以看到Bootstrap导航栏。

只有我的视图内容没有显示。

Main.js

import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

import Vue from 'vue';
import app from './App.vue';

import router from './router';

Vue.config.productionTip = false;
Vue.use(BootstrapVue);

new Vue({
  render: (h) => h(app),
  router,
}).$mount('#app');

router.js

import Vue from 'vue';
import Router from 'vue-router';
import Companies from './views/Companies.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/Companies',
      name: 'Companies',
      component: Companies,
    },
  ],
});

Companies.vue

<template>
  <div id="a">
    abcde
  </div>
</template>

<script>

export default {
  name: 'Companies',
};
</script>

编辑:好的,那是app.vue中缺少的路由器视图!谢谢

0 个答案:

没有答案