Vue.js开发主题时Router组件不显示问题求助（附代码）

嘿，我帮你梳理了代码里的几个关键问题，这些应该就是导致组件无法显示、页面空白的原因，咱们一个个来修复：

1. 缺失BootstrapVue的导入 #

你在main.js里调用了Vue.use(BootstrapVue)，但没有先导入BootstrapVue包，这会导致潜在报错（可能被其他问题掩盖了），需要补充导入：

// 在main.js开头添加这行
import BootstrapVue from 'bootstrap-vue';

2. 路由构造函数的参数错误 #

Vue Router的构造函数接受的配置项是routes，但你写的是routers，这会导致路由规则完全没有被加载：

// 错误写法
const router = new VueRouter({ routers, mode : 'history' });

// 正确写法（推荐把变量名也改成routes，更符合规范）
const routes = [
  {
    path: '/pagea',
    name : 'Pagea',
    component : Pagea
  }
];
const router = new VueRouter({ routes, mode : 'history' });

3. 缺少默认路由（/路径） #

你的页面初始加载路径是/，而且router-link有指向/的链接，但你没有配置这个路径对应的组件，所以初始页面和点击"Go to Foo"时都会显示空白。可以添加一个默认重定向，或者配置Home组件：

// 在routes数组里新增默认路由
{
  path: '/',
  redirect: '/pagea' // 重定向到Pagea组件，直接显示内容
}

4. Router-Link路径大小写不匹配 #

你的router-link里写的是to="/Pagea"（大写P），但路由配置的path是/pagea（小写p），Vue Router的路径是区分大小写的，两者必须统一：

<!-- App.vue里修正路由链接 -->
<router-link to="/pagea">Go to Bar</router-link>

5. App.vue中未导入Header和Footer组件 #

你在App.vue的components选项里注册了Header和Footer，但没有导入这两个组件，这会导致组件注册失败。如果是自定义组件，需要补充导入；如果暂时不需要，可以先注释掉避免报错：

<script>
// 若需要Header/Footer组件，补充导入
// import Header from './components/Header.vue';
// import Footer from './components/Footer.vue';

export default {
  name: 'app',
  // components: { Header, Footer } // 暂时不需要可注释
}
</script>

修正后的完整代码示例 #

main.js #

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

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

//Router配置
import Pagea from './components/Pagea.vue';
const routes = [
  {
    path: '/',
    redirect: '/pagea'
  },
  {
    path: '/pagea',
    name : 'Pagea',
    component : Pagea
  }
];
const router = new VueRouter({ routes, mode : 'history' });

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

App.vue #

<template>
  <div id="app">
    <router-link to="/">Go to Foo</router-link>
    <router-link to="/pagea">Go to Bar</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'app'
}
</script>

把这些问题都修复后，你应该就能正常看到Pagea组件的内容，点击路由链接也能正常切换了~

内容的提问来源于stack exchange，提问作者Maruf Ahmed