更改标题配置

src/main.js

@@ -10,8 +10,6 @@ import VueParticles from 'vue-particles'
 import i18n from './lang'
 import * as utils from '@/utils'
 import 'font-awesome/scss/font-awesome.scss'
-// 引入定制标题的指令
-import 'directives/customTitle.js'
 // 在入口处引入模拟的假数据
 import '@/mock'
 // 引入完整的饿了么组件库

src/router/index.js

@@ -1,93 +1,115 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue";
+import Router from "vue-router";
 
 // 登录
-const Signin = resolve => require(['@/views/Signin'], resolve)
+const Signin = resolve => require(["@/views/Signin"], resolve);
 
 // 非登录页的包裹组件
-const Layout = resolve => require(['@/views/Layout'], resolve)
+const Layout = resolve => require(["@/views/Layout"], resolve);
 
 // 项目信息
-const ProjectInfo = resolve => require(['@/views/ProjectInfo'], resolve)
+const ProjectInfo = resolve => require(["@/views/ProjectInfo"], resolve);
 
 // 关于作者
-const About = resolve => require(['@/views/About'], resolve)
+const About = resolve => require(["@/views/About"], resolve);
 
 // 天气预报
-const Weather = resolve => require(['@/views/Weather'], resolve)
-    // 立方体
-const Cube = resolve => require(['@/views/Cube'], resolve)
-    // 权限测试
-const AuthorityTest = resolve => require(['@/views/AuthorityTest'], resolve)
-    // 404
-const Notfound = resolve => require(['@/views/Notfound'], resolve)
+const Weather = resolve => require(["@/views/Weather"], resolve);
+// 立方体
+const Cube = resolve => require(["@/views/Cube"], resolve);
+// 权限测试
+const AuthorityTest = resolve => require(["@/views/AuthorityTest"], resolve);
+// 404
+const Notfound = resolve => require(["@/views/Notfound"], resolve);
 
-Vue.use(Router)
+Vue.use(Router);
 
 const router = new Router({
-    routes: [
-        // 首先是登录页的路由
+  routes: [
+    // 首先是登录页的路由
+    {
+      path: "/signin",
+      name: "Signin",
+      meta: {
+        requireAuth: false,
+        title: "Auto Vue"
+      },
+      component: Signin
+    },
+    // 然后就是嵌套路由了，也就是登陆后的各个页面
+    {
+      path: "/",
+      meta: {
+        requireAuth: true
+      },
+      component: Layout,
+      // redirect: '/notes', // 重定向到第一个子路由，否则只渲染Layout组件，这块儿使用时解除注释
+      redirect: "/signin", // 这里重定向到登录页面，是为了展示使用，实际用这个项目开发时，需要注释这行，解除上一行的注释
+      children: [
         {
-            path: '/signin',
-            name: 'Signin',
-            meta: {
-                requireAuth: false
-            },
-            component: Signin
+          path: "notes",
+          meta: {
+            requireAuth: true,
+            title: "开发备忘"
+          },
+          component: ProjectInfo
         },
-        // 然后就是嵌套路由了，也就是登陆后的各个页面
         {
-            path: '/',
-            meta: {
-                requireAuth: true
-            },
-            component: Layout,
-            // redirect: '/notes', // 重定向到第一个子路由，否则只渲染Layout组件，这块儿使用时解除注释
-            redirect: '/signin', // 这里重定向到登录页面，是为了展示使用，实际用这个项目开发时，需要注释这行，解除上一行的注释
-            children: [{
-                    path: 'notes',
-                    meta: { requireAuth: true },
-                    component: ProjectInfo
-                },
-                {
-                    path: 'about',
-                    meta: { requireAuth: true },
-                    component: About
-                },
-                {
-                    path: 'weather',
-                    meta: { requireAuth: true },
-                    component: Weather
-                },
-                {
-                    path: 'cube',
-                    meta: { requireAuth: true },
-                    component: Cube
-                },
-                {
-                    path: 'authority',
-                    meta: { requireAuth: true },
-                    component: AuthorityTest
-                }
-            ]
+          path: "about",
+          meta: {
+            requireAuth: true,
+            title: "关于作者"
+          },
+          component: About
         },
-        // 最后是404页面
         {
-            path: '*',
-            meta: { requireAuth: false },
-            component: Notfound
+          path: "weather",
+          meta: {
+            requireAuth: true,
+            title: "天气预报"
+          },
+          component: Weather
+        },
+        {
+          path: "cube",
+          meta: {
+            requireAuth: true,
+            title: "魔幻立方"
+          },
+          component: Cube
+        },
+        {
+          path: "authority",
+          meta: {
+            requireAuth: true,
+            title: "权限测试"
+          },
+          component: AuthorityTest
         }
-    ]
-})
+      ]
+    },
+    // 最后是404页面
+    {
+      path: "*",
+      meta: {
+        requireAuth: false,
+        title: "404"
+      },
+      component: Notfound
+    }
+  ]
+});
 
 // 当一个导航触发时，全局的 before 钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子 resolve 完之前一直处于等待中。
 router.beforeEach((to, from, next) => {
-    // 如果已经登录，并且要去登录页，就不让TA去登录页，重定向到首页
-    if (to.path === '/signin' && localStorage.token) {
-        next('/notes')
-    } else {
-        next()
-    }
-})
+  // 自动化修改页面标签的 title
+  document.title = to.meta.title;
+  // 如果已经登录，并且要去登录页，就不让TA去登录页，重定向到首页
+  if (to.path === "/signin" && localStorage.token) {
+    next("/notes");
+  } else {
+    next();
+  }
+});
 
-export default router
+export default router;

src/views/About/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-title="'关于作者'">
+    <div>
         关于作者
         <contact-card></contact-card>
     </div>

src/views/AuthorityTest/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="text-align:center;padding:250px" v-title="'权限测试'">
+    <div style="text-align:center;padding:250px">
         <el-button class="animated rollIn" type="primary" size="large" @click="setAdmin" :disabled="isAdminAble"><i class="fa fa-user"></i>&nbsp;&nbsp;我是管理员</el-button>
         <el-button class="animated rollIn rythm rythm-high" size="large" @click="setUser" :disabled="!isAdminAble"><i class="fa fa-user-o"></i>&nbsp;&nbsp;我是吃瓜群众</el-button>
     </div>

src/views/Cube/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cube-wrap" v-title="'魔幻立方'">
+    <div class="cube-wrap">
        <Cube></Cube>
     </div>
 </template>

src/views/Notfound/index.vue

@@ -1,40 +1,42 @@
 <template>
-    <div>
-        <h1 class="animated flipInX">404</h1>
-        <div class="back animated bounceInUp">
-            <i title="返回" class="fa fa-reply-all" @click="goBack"></i>
-        </div>
+  <div>
+    <h1 class="animated flipInX">404</h1>
+    <div class="back animated bounceInUp">
+      <i title="返回" class="fa fa-reply-all" @click="goBack"></i>
     </div>
+  </div>
 </template>
 <script>
 export default {
-    name: 'notfound',
-    methods: {
-        goBack() {
-            this.$router.go(-1)
-        }
+  name: "notfound",
+  methods: {
+    goBack() {
+      this.$router.go(-1);
     }
-}
+  }
+};
 </script>
 <style scoped lang="scss">
 h1 {
-    text-align: center;
-    font-size: 12em;
-    font-family: fantasy;
-    color: #475669;
-    letter-spacing: 25px;
+  text-align: center;
+  font-size: 12em;
+  font-family: fantasy;
+  color: #475669;
+  letter-spacing: 25px;
+  margin-top: 0;
+  padding-top: 25vh;
 }
 
 .back {
-    padding-right: 3em;
-    text-align: right;
-    i {
-        font-size: 2em;
-        color: #475669;
-        &:hover {
-            cursor: pointer;
-            color: #324057;
-        }
+  padding-right: 3em;
+  text-align: right;
+  i {
+    font-size: 2em;
+    color: #475669;
+    &:hover {
+      cursor: pointer;
+      color: #324057;
     }
+  }
 }
 </style>

src/views/ProjectInfo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-title="'项目信息'">
+  <div>
     <el-card class="box-card">
       <div slot="header" class="clearfix">
         <i class="el-icon-edit"></i>&nbsp;&nbsp;

src/views/Signin/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="bg">
-        <div class="login-wrap animated flipInY" v-title="'Auto Vue'">
+        <div class="login-wrap animated flipInY">
             <h3>Auto Vue</h3>
             <h3>{{$t('m.login.introduction')}}</h3>
             <el-form ref="form" :model="form" :rules="rules" label-width="0px">

src/views/Weather/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="charts" v-title="'天气预报'">
+  <div class="charts">
     <el-row class="sel-row">
       <el-col :span="2" class="sel-label">选择城市：</el-col>
       <el-col :span="3">