add dynamic title (#1062)

examples/entry.js

@@ -9,6 +9,7 @@ import MainFooter from './components/footer.vue';
 import MainHeader from './components/header.vue';
 import SideNav from './components/side-nav';
 import FooterNav from './components/footer-nav';
+import title from './i18n/title';
 
 Vue.use(Element);
 Vue.use(VueRouter);
@@ -24,6 +25,10 @@ const router = new VueRouter({
   routes
 });
 
+router.afterEach(route => {
+  document.title = title[route.meta.lang][route.name] || 'Element';
+});
+
 new Vue({ // eslint-disable-line
   render: h => h(entry),
   router

examples/i18n/page.json

@@ -79,7 +79,7 @@
         "15": "适用于导航较少，页面篇幅较长的网站。"
       },
       "resource": {
-        "paraHeight": "1.2",
+        "paraHeight": "1.8",
         "1": "资源",
         "2": "这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。",
         "3": "Axure Components",

examples/i18n/title.js

+export default {
+  'zh-CN': {
+    home: 'Element - 网站快速成型工具',
+    guide: '指南 | Element',
+    component: '组件 | Element',
+    resource: '资源 | Element'
+  },
+  'en-US': {
+    home: 'Element - A Desktop UI Library',
+    guide: 'Guide | Element',
+    component: 'Component | Element',
+    resource: 'Resource | Element'
+  }
+};

examples/route.config.js

@@ -38,6 +38,7 @@ const registerRoute = (navConfig) => {
         description: page.description,
         lang
       },
+      name: 'component',
       component: component.default || component
     };
 
@@ -56,10 +57,12 @@ const generateMiscRoutes = function(lang) {
     component: require(`./pages/${ lang }/guide.vue`),
     children: [{
       path: 'design', // 设计原则
+      name: 'guide',
       meta: { lang },
       component: require(`./pages/${ lang }/design.vue`)
     }, {
       path: 'nav', // 导航
+      name: 'guide',
       meta: { lang },
       component: require(`./pages/${ lang }/nav.vue`)
     }]
@@ -68,6 +71,7 @@ const generateMiscRoutes = function(lang) {
   let resourceRoute = {
     path: `/${ lang }/resource`, // 资源
     meta: { lang },
+    name: 'resource',
     component: require(`./pages/${ lang }/resource.vue`)
   };