Parcourir la source

Seo优化, 头部底部直接渲染

xinfeng il y a 6 ans
Parent
commit
0f9ede37c8
4 fichiers modifiés avec 29 ajouts et 12 suppressions
  1. 4 5
      layouts/default.vue
  2. 4 4
      layouts/opacity_header.vue
  3. 9 2
      plugins/deviceType.js
  4. 12 1
      store/index.js

+ 4 - 5
layouts/default.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="container">
-    <proginn-header v-if="isPC != -1 && isPC"/>
-    <wx-header v-if="isWeixin"></wx-header>
+    <proginn-header v-if="deviceType.pc"/>
+    <wx-header v-if="deviceType.wx"></wx-header>
     <nuxt class="main"/>
-    <proginn-footer v-if="isPC != -1 && isPC"/>
+    <proginn-footer v-if="deviceType.pc"/>
   </div>
 </template>
 
@@ -20,12 +20,11 @@ export default {
     WxHeader,
   },
   computed: {
-    ...mapState(['isPC', `isWeixin`]),
+    ...mapState(['isPC', 'isWeixin', 'deviceType']),
   },
   mounted() {
     this.checkTerminal()
     window.addEventListener('resize', this.checkInnerWidth)
-
     // 修改密码处理
     if(this.$route.path.includes('/setting/check/change_mobile') || this.$route.path.includes('/setting/check/real_info')) {
       // 如果上页不是验证码页面,则认为是复制地址过来,强制踢出

+ 4 - 4
layouts/opacity_header.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="container">
-    <proginn-header v-if="isPC != -1 && isPC" transparent="true"/>
-    <wx-header v-if="isWeixin"></wx-header>
+    <proginn-header v-if="deviceType.pc" transparent="true"/>
+    <wx-header v-if="deviceType.wx"></wx-header>
     <nuxt class="main"/>
-    <proginn-footer v-if="isPC != -1 && isPC"/>
+    <proginn-footer v-if="deviceType.pc"/>
   </div>
 </template>
 
@@ -20,7 +20,7 @@ export default {
     WxHeader,
   },
   computed: {
-    ...mapState(['isPC', `isWeixin`]),
+    ...mapState(['isPC', 'isWeixin', 'deviceType']),
   },
   mounted() {
     this.checkTerminal()

+ 9 - 2
plugins/deviceType.js

@@ -9,6 +9,7 @@ export default function ({req}, inject) {
   deviceType.android = false
   deviceType.pc = false
   deviceType.ios = false
+  deviceType.wx = false
   deviceType.ua = ''
   
   if (req && req.headers) {
@@ -24,6 +25,10 @@ export default function ({req}, inject) {
     deviceType.pc = true
   }
   
+  if (/(MicroMessenger)/i.test(deviceType.ua)) {
+    deviceType.wx = true
+  }
+  
   deviceType.isIos = function() {
     return deviceType.ios
   }
@@ -37,12 +42,14 @@ export default function ({req}, inject) {
   }
   
   deviceType.isPC = function() {
-    console.log('deviceType', deviceType)
     return deviceType.pc
   }
   
   deviceType.isWx = function() {
-  
+    return deviceType.wx
   }
+  
+  console.log('deviceType:', deviceType)
+  
   inject('deviceType', deviceType)
 }

+ 12 - 1
store/index.js

@@ -10,7 +10,10 @@ const store = () => new Vuex.Store({
     wxConfig: {},
     regPhone: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[35678]|18[0-9]|14[57])[0-9]{8}$/,
     regEmail: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
-    regSpecialChar: /[&¥%\/\*]+/
+    regSpecialChar: /[&¥%\/\*]+/,
+    deviceType: {
+    
+    }
   },
   getters: {
     isLogin(state) {
@@ -27,12 +30,20 @@ const store = () => new Vuex.Store({
     updateIsWeixin(state, payload) {
       state.isWeixin = payload.isWeixin
     },
+    updateDeviceType(state, payload) {
+      state.deviceType = payload
+    },
     updateWxConfig(state, payload) {
       state.wxConfig = {
         ...state.wxConfig,
         ...payload.wxConfig,
       }
     }
+  },
+  actions: {
+    async nuxtServerInit({commit}, {app}) {
+      commit('updateDeviceType', app.$deviceType || {})
+    }
   }
 })