页面头部导航栏显示问题 (#395)

Co-authored-by: 2020mac <2020mac@2020macdeMacBook-Pro.local>

litemall-vue/package.json

@@ -22,7 +22,8 @@
     "vant": "^2.0.6",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
-    "vuelidate": "^0.7.4"
+    "vuelidate": "^0.7.4",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.5",

litemall-vue/src/App.vue

@@ -1,5 +1,6 @@
 <template>
 <div id="app">
+  <v-header></v-header>
   <keep-alive>
     <router-view class="view-router"  v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>
@@ -7,5 +8,13 @@
   <router-view name="tabbar"></router-view>
 </div>
 </template>
+<script>
+import header from "@/components/Header";
 
+export default {
+  components:{
+    'v-header': header
+  }
+}
+</script>
 <style lang="scss" src="./assets/scss/global.scss" />

litemall-vue/src/components/Header/index.vue

@@ -0,0 +1,34 @@
+<template>
+<div>
+    <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="goBack" v-show="showHeader"/>   
+</div>
+     
+</template>
+<script>
+import { NavBar } from 'vant';
+import { mapState } from 'vuex';
+
+export default {
+    name:"v-header",
+    data(){
+        return {
+            title:"",
+        };
+    },
+    computed: {
+        showHeader:function(){
+            let header=this.$store.getters.showHeader;
+            this.title=this.$store.getters.titleHeader;
+            return header
+        }
+    },
+    methods: {
+        goBack() {
+            this.$router.back(-1);
+        }
+   },
+   components: {
+    [NavBar.name]:NavBar,
+  }
+}
+</script>

litemall-vue/src/main.js

@@ -6,6 +6,8 @@ import '@/assets/scss/global.scss';
 import '@/assets/scss/iconfont/iconfont.css';
 
 import VueCountdown from '@chenfengyuan/vue-countdown';
+import store from './store'
+
 
 import filters from '@/filter';
 
@@ -34,5 +36,6 @@ Vue.config.productionTip = false;
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app');

litemall-vue/src/router/home.js

@@ -9,8 +9,9 @@ export default [
       tabbar: Tabbar
     },
     meta: {
-      keepAlive: true
-    }
+      keepAlive: true,
+      showHeader:false
+    },
   },
   {
     path: '*',

litemall-vue/src/router/index.js

@@ -7,6 +7,7 @@ import items from './items';
 import user from './user';
 import order from './order';
 import login from './login';
+import store from '../store/index';
 
 Vue.use(Router);
 
@@ -20,10 +21,20 @@ RouterModel.beforeEach((to, from, next) => {
   );
   if (!Authorization) {
     if (to.meta.login) {
+      console.log("login");
       next({ name: 'login', query: { redirect: to.name } });
       return;
     }
   }
+  console.log(to.meta,"meta");
+  //页面顶部菜单拦截
+  let emptyObj=JSON.stringify(to.meta) == "{}";
+  let undefinedObj=typeof(to.meta.showHeader)=="undefined";
+  if(!emptyObj&&!undefinedObj){
+    store.commit("CHANGE_HEADER",to.meta);
+  }else{
+    store.commit("CHANGE_HEADER",{showHeader:true,title:""});
+  }
   next();
 });
 

litemall-vue/src/router/items.js

@@ -5,7 +5,8 @@ export default [
     path: '/items',
     name: 'class',
     meta: {
-      keepAlive: true
+      keepAlive: true,
+      showHeader:false
     },
     components: {
       default:  () => import('@/views/items/tabbar-catalog'),
@@ -16,7 +17,9 @@ export default [
     path: '/items/search',
     name: 'search',
     meta: {
-      keepAlive: true
+      keepAlive: true,
+      title:"搜索",
+      showHeader:false
     },
     component: () => import('@/views/items/search')
   },

litemall-vue/src/router/login.js

@@ -2,6 +2,10 @@ export default [
   {
     path: '/login',
     name: 'login',
+    meta: {
+      showHeader:false,
+      title:"登录"
+    },
     component: () => import('@/views/login/login')
   },
   {

litemall-vue/src/router/order.js

@@ -5,7 +5,9 @@ export default [
     path: '/order',
     name: 'cart',
     meta: {
-      login: true
+      login: true,
+      showHeader:false,
+      title:"购物车"
     },
     components: { 
       default: () => import('@/views/order/tabbar-cart'), 

litemall-vue/src/router/user.js

@@ -22,7 +22,10 @@ export default [
     path: '/user',
     name: 'user',
     meta: {
-      keepAlive: true
+      keepAlive: true,
+      login: true,
+      showHeader:false,
+      title:"购物车"
     },
     components: { default: tab_user, tabbar: Tabbar }
   },

litemall-vue/src/store/getters.js

@@ -0,0 +1,3 @@
+export const showHeader = state => state.showHeader
+
+export const titleHeader = state => state.title

litemall-vue/src/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import * as getters from './getters'
+import mutations from './mutations'
+
+Vue.use(Vuex)
+
+const state = {
+  showHeader:true,
+}
+
+export default new Vuex.Store({
+  strict: process.env.NODE_ENV !== 'production',
+  state,
+  getters,
+  mutations
+})

litemall-vue/src/store/mutation-types.js

@@ -0,0 +1 @@
+export const CHANGE_HEADER= 'CHANGE_HEADER'

litemall-vue/src/store/mutations.js

@@ -0,0 +1,8 @@
+import * as types from './mutation-types'
+
+export default {
+  [types.CHANGE_HEADER] (state,payload) {
+    state.showHeader=payload.showHeader;
+    state.title=payload.title;
+  }
+}