Vue+Vant路由引入组件页面显示空白的问题

Question

Vue+Vant
App.vue用的tabbar,想实现底部bar不变，页面跟随bar切换的效果。代码如下：

//App.vue
<template>
  <div id="app">
    <van-tabbar route>
      <van-tabbar-item replace to="/customer" icon="phone-o"
        >客户</van-tabbar-item
      >
      <van-tabbar-item replace to="/contact" icon="friends-o"
        >联系人</van-tabbar-item
      >
      <van-tabbar-item replace to="/project" icon="records"
        >项目</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

我的路由是这样写的：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/customer",
    name: "customer",
    component: () => import("@/views/Customer")
  }
];

const router = new VueRouter({
  routes
});

export default router;

Customer组件内容如下：

<template>
  <div class="page-container">
    page-container
  </div>
</template>

<script>
export default {};
</script>

<style>
.page-container {
  width: 100%;
  height: 100%;
  background-color: #333;
}
</style>

目录结构是这样的：

现在页面上无报错，但是Customer组件中的内容不显示。
想问问各位大哥问题出在哪里？

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本（请勿用截图）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

建议
1.底部tab 单独分成一个组件App中引入使用
2.App文件中添加 <router-view/> 输出一下视图
3.路由文件中添加一个 "未匹配的任何路径的默认跳转"，以及 beforeEach 路由拦截

/* 默认跳转 */
{
    path: "**",
    redirect: "/customer"
  }
  
/*路由拦截*/
router.beforeEach((to, from, next) => {
 ...
 next()
})

Answer 2

路由这样写：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/customer"
  },
  {
    path: "/customer",
    name: "Customer",
    component: () => import("@/views/Customer")
  }
];

const router = new VueRouter({
  routes
});

export default router;

App.vue这样写：

<template>
  <div id="app">
    <router-view />
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar";
export default {
  components: {
    Tabbar
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

和组件的抽离无关，主要是路由重定向的写法不正确。