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

新手上路,请多包涵

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组件中的内容不显示。
想问问各位大哥问题出在哪里?

问题描述

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

相关代码

粘贴代码文本(请勿用截图)

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

阅读 6.3k
2 个回答

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

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

路由这样写:

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>

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题