设置动态document.title

liuqimichale
1 parent e19eac3d
Showing 8 changed files with 64 additions and 13 deletions
webintroduce/src/App.vue
webintroduce/src/components/VHeader.vue
webintroduce/src/main.js
webintroduce/src/router/index.js
webintroduce/src/views/VEnterprise.vue → webintroduce/src/views/enterprise.vue
webintroduce/src/views/VHome.vue → webintroduce/src/views/home.vue
webintroduce/src/views/login.vue
webintroduce/src/views/VSolution.vue → webintroduce/src/views/solution.vue
 <template>
   <div id="app">
-    <VHeader></VHeader>
+    <VHeader v-if="headerShow"></VHeader>
     <div class="main-wrap">
       <router-view/>
     </div>
  
-    <VFooter></VFooter>
+    <VFooter v-if="footerShow"></VFooter>
   </div>
 </template>
  
@@ -17,6 +17,22 @@ export default {
   components:{
     VHeader,
     VFooter
+  },
+  data() {
+    return {
+      footerShow: true,
+      headerShow: true
+    }
+  },
+  watch: {
+    $route(to, from){
+      console.log(this.$route.path)
+      if(this.$route.path === '/login'){
+        this.headerShow = this.footerShow = false
+      }else {
+        this.headerShow =  this.footerShow = true
+      }
+    }
   }
 }
 </script>
@@ -5,7 +5,6 @@
          :to="{path:link.linkPath}"
          tag="li" v-for="(link,index) in navLinks"
          :key="index"
-         @click="navChange(index)"
          exact="">
          {{link.name}}
        </router-link>
@@ -20,15 +19,14 @@ export default {
     return {
       navLinks: [
         {name:'首页',linkPath:'/home'},
-        {name:'解决方案',linkPath:'/solution'}
+        {name:'解决方案',linkPath:'/solution'},
+        {name:'登录',linkPath:'/login'}
       ]
     }
   },
   methods:{
-    navChange(index) {
+  },
  
-    }
-  }
 }
 </script>
  
@@ -7,6 +7,12 @@ import router from &#39;./router&#39;
 require ('./assets/css/reset.css')
 Vue.config.productionTip = false
  
+router.beforeEach((to, from, next) =>{
+  console.log(to)
+  document.title = to.meta.title
+  next()
+})
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
 import Vue from 'vue'
 import Router from 'vue-router'
-import VHome from '../views/VHome'
-const VSolution = () => import('../views/VSolution')
-const VEnterprise = () => import('../views/VEnterprise')
+import home from '../views/home'
+const solution = () => import('../views/solution')
+const enterprise = () => import('../views/enterprise')
+const login = () => import('../views/login')
  
 Vue.use(Router)
  
@@ -16,17 +17,34 @@ export default new Router({
     {
       path: '/home',
       name: 'home',
-      component: VHome
+      component: home,
+      meta: {
+        title: '首页'
+      }
     },
     {
       path: '/solution',
       name: 'solution',
-      component: VSolution
+      component: solution,
+      meta: {
+        title: '解决方案'
+      }
     },
     {
       path: '/enterprise/:id',
       name: 'enterprise',
-      component: VEnterprise
+      component: enterprise,
+      meta: {
+        title: '企业'
+      }
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: login,
+      meta: {
+        title: '登录'
+      }
     }
   ]
 })
+<template>
+    <div>登录页面没有公共的头部底部</div>
+</template>
+
+<script>
+export default {
+  name: 'login'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>