更新

src/layout/common/footInfo.vue

@@ -7,11 +7,11 @@
             <!-- <van-image width="60" height="60" :src="index" /> -->
             <p class="text">直播大厅</p>
           </van-tabbar-item>
-          <van-tabbar-item to="/two">
+          <van-tabbar-item to="/market/index">
             <!-- <van-image width="60" height="60" :src="question" /> -->
             <p class="text">科技超市</p>
           </van-tabbar-item>
-          <van-tabbar-item to="/three">
+          <van-tabbar-item to="/user/index">
             <!-- <van-image width="60" height="60" :src="user" /> -->
             <p class="text">个人中心</p>
           </van-tabbar-item>

src/router/index.js

@@ -8,8 +8,23 @@ const routes = [
   {
     path: '/',
     name: '',
+    meta: { title: '直播大厅', isleftarrow: true },
     component: () => import('../views/index.vue'),
   },
+  // 首頁-科技超市
+  {
+    path: '/market/index',
+    name: '',
+    meta: { title: '科技超市', isleftarrow: true },
+    component: () => import('../views/market/index.vue'),
+  },
+  // 首頁-个人中心
+  {
+    path: '/user/index',
+    name: '',
+    meta: { title: '个人中心', isleftarrow: true },
+    component: () => import('../views/user/index.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/index.vue

@@ -27,13 +27,20 @@ export default {
     footInfo,
   },
   data: () => ({
-    title: '日程安排',
+    // 头部标题
+    title: '',
+    // meta为true
     isleftarrow: '',
+    // 返回
     navShow: true,
   }),
   created() {},
   computed: {},
   methods: {},
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
 };
 </script>
 

src/views/market/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          主体
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+  },
+  data: () => ({
+    // 头部标题
+    title: '',
+    // meta为true
+    isleftarrow: '',
+    // 返回
+    navShow: true,
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>

src/views/user/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          主体
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+  },
+  data: () => ({
+    // 头部标题
+    title: '',
+    // meta为true
+    isleftarrow: '',
+    // 返回
+    navShow: true,
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>