use hash

examples/app.vue

@@ -81,6 +81,11 @@
 
 <script>
   export default {
-    name: 'app'
+    name: 'app',
+    created() {
+      window.addEventListener('hashchange', () => {
+        document.body.scrollTop = 0;
+      });
+    }
   };
 </script>

examples/components/footer.vue

@@ -1,11 +1,11 @@
 <template>
   <footer class="footer">
     <div class="container">
-       <div class="footer-main">
+      <div class="footer-main">
-         <p class="footer-main-title">Element 1.0 Hydrogen</p>
+        <p class="footer-main-title">Element 1.0 Hydrogen</p>
-         <span class="footer-main-link">反馈建议</span>
+        <span class="footer-main-link">反馈建议</span>
-         <span class="footer-main-link"><router-link to="/changelog">更新日志</router-link></span>
+        <span class="footer-main-link"><router-link to="/changelog">更新日志</router-link></span>
-       </div>
+      </div>
       <div class="footer-social">
         <el-popover
           ref="weixin"
@@ -72,10 +72,12 @@
       line-height: 120px;
     
       .footer-popover {
-        padding: 0;
+        .el-popover {
-        min-width: 120px;
+          padding: 0;
-        line-height: normal;
+          min-width: 120px;
-        box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
+          line-height: normal;
+          box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
+        }
 
         .footer-popover-title {
           border-bottom: solid 1px #eaeefb;

examples/entry.js

@@ -18,28 +18,9 @@ Vue.component('main-header', MainHeader);
 Vue.component('side-nav', SideNav);
 Vue.component('footer-nav', FooterNav);
 
-const scrollBehavior = (to, from, savedPosition) => {
-  if (savedPosition) {
-    // savedPosition is only available for popstate navigations.
-    return savedPosition;
-  } else {
-    // new navigation.
-    // scroll to anchor
-    if (to.hash) {
-      return { anchor: true };
-    }
-    // explicitly control scroll position
-    // check if any matched route config has meta that requires scrolling to top
-    if (to.matched.some(m => m.meta.scrollToTop)) {
-      return { x: 0, y: 0 };
-    }
-  }
-};
-
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: __dirname,
-  scrollBehavior,
   routes: configRouter
 });
 

examples/route.config.js

@@ -4,8 +4,7 @@ const registerRoute = (config) => {
   let route = [{
     path: '/component',
     component: require('./pages/component.vue'),
-    children: [],
+    children: []
-    scrollToTop: true
   }];
   function addRoute(page) {
     const component = require(`./docs${page.path}.md`);
@@ -14,8 +13,7 @@ const registerRoute = (config) => {
       path: page.path.slice(1),
       meta: {
         title: page.title || page.name,
-        description: page.description,
+        description: page.description
-        scrollToTop: true
       },
       component: component.default || component
     });
@@ -45,7 +43,6 @@ let guideRoute = {
   path: '/guide',
   name: '指南',
   component: require('./pages/guide.vue'),
-  meta: { scrollToTop: true },
   children: [{
     path: 'design',
     name: '设计原则',
@@ -60,20 +57,17 @@ let guideRoute = {
 let resourceRoute = {
   path: '/resource',
   name: '资源',
-  meta: { scrollToTop: true },
   component: require('./pages/resource.vue')
 };
 
 let indexRoute = {
   path: '/',
   name: '首页',
-  meta: { scrollToTop: true },
   component: require('./pages/index.vue')
 };
 
 let changeLogRoute = {
   path: '/changelog',
-  meta: { scrollToTop: true },
   component: require('./pages/changelog.vue')
 };
 

src/utils/vue-popper.js

@@ -63,7 +63,7 @@ export default {
 
       const options = this.options;
       const popper = this.popper || this.$refs.popper;
-      const reference = this.reference || this.$refs.reference || this.$slots.reference[0].elm;;
+      const reference = this.reference || this.$refs.reference || this.$slots.reference[0].elm;
 
       if (!popper || !reference) return;
       if (this.visibleArrow) {