优化

src/App.vue

@@ -1,15 +1,27 @@
 <template>
-  <div class="nsgk-global-main">
-    <router-view/>
+  <div id="app">
+    <div
+      class="nsgk-noNav-main"
+      v-if="!$route.meta.hidden || $route.meta.hidden == undefined"
+    >
+      <router-view />
+      <navFooter></navFooter>
+    </div>
+    <div class="nsgk-global-main" v-else>
+      <router-view />
+    </div>
   </div>
 </template>
 
 <script>
+import navFooter from "@/components/common/nav_footer";
 export default {
-  name: 'App'
-}
+  name: "App",
+  components: { navFooter },
+  mounted() {},
+};
 </script>
 
 <style lang="scss" >
-   @import './assets/css/base'
+@import "./assets/css/base";
 </style>

src/components/common/nav_footer.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="tb-toolbar-container">
+    <router-link to="/index" class="tab" active-class="active" exact>
+      <span class="icon"><van-icon name="chat-o" size="20" /></span>
+      <p class="text">消息</p>
+    </router-link>
+    <router-link to="/document" class="tab" active-class="active">
+      <span class="icon"><van-icon name="notes-o" size="20" /></span>
+      <p class="text">文档</p>
+    </router-link>
+    <router-link to="/workbench" class="tab" active-class="active">
+      <span class="icon"><van-icon name="apps-o" size="20" /></span>
+      <p class="text">工作台</p>
+    </router-link>
+    <router-link to="/addressBook" class="tab" active-class="active">
+      <span class="icon"><van-icon name="manager-o" size="20" /></span>
+      <p class="text">通讯录</p>
+    </router-link>
+    <router-link to="/my" class="tab" active-class="active">
+      <span class="icon"><van-icon name="contact" size="20" /></span>
+      <p class="text">我的</p>
+    </router-link>
+  </div>
+</template>
+<script>
+export default {
+  name: "",
+};
+</script>
+<style scoped lang="scss">
+.tb-toolbar-container {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 1001;
+  background-color: #fff;
+  border-top: 1px solid #e7e7e7;
+  border-bottom: 1px solid #f8f8f8;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  align-items: center;
+  position: fixed;
+  padding: 10px 40px;
+  .active {
+  }
+  .tab {
+    color: #5d656b;
+    text-align: center;
+    &.active {
+      color: #1989fa;
+    }
+    .icon {
+      padding-bottom: 3px;
+    }
+  }
+}
+</style>

src/main.js

@@ -22,6 +22,13 @@ if ('addEventListener' in document) {
     FastClick.attach(document.body);
   }, false);
 }
+//设置动态登录页
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  next()
+})
 
 /* eslint-disable no-new */
 new Vue({

src/router/index.js

@@ -4,21 +4,33 @@ import Router from 'vue-router'
 
 Vue.use(Router)
 
-export const constantRoutes =[
+export const constantRoutes = [
   {
     path: '/',
+    redirect: '/index'
+  },
+  {
+    path: '/index',
     name: 'index',
-    component:  (resolve) => require(['@/views/home'], resolve)
+    meta: {
+      title: '主页',  //当前页面title
+    },
+    component: (resolve) => require(['@/views/home'], resolve)
   },
   {
     path: '/login',
     name: 'login',
-    component:  (resolve) => require(['@/views/login'], resolve)
+    meta: {
+      title: '登录页',
+      hidden: true
+    },
+    component: (resolve) => require(['@/views/login'], resolve)
   }
 ];
 
 
 export default new Router({
+  linkActiveClass: 'active',
   mode: 'history', // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes