fix: #153 Drawer links not working in history mode

dev/components/test-layout/layout.vue

@@ -31,18 +31,18 @@
       </div>
 
       <div class="list no-border platform-delimiter">
-        <quasar-drawer-link icon="view_quilt" to="/test-layout/about" exact>
+        <quasar-drawer-link icon="view_quilt" route="/test-layout/about">
           About Layout
         </quasar-drawer-link>
         <hr>
         <div class="list-label">Layout Components</div>
-        <quasar-drawer-link icon="build" to="/test-layout/toolbar" exact>
+        <quasar-drawer-link icon="build" route="/test-layout/toolbar">
           Toolbar
         </quasar-drawer-link>
-        <quasar-drawer-link icon="tab" to="/test-layout/tabs" exact>
+        <quasar-drawer-link icon="tab" route="/test-layout/tabs">
           Tabs
         </quasar-drawer-link>
-        <quasar-drawer-link icon="compare_arrows" to="/test-layout/drawer" exact>
+        <quasar-drawer-link icon="compare_arrows" route="/test-layout/drawer">
           Layout Drawer
         </quasar-drawer-link>
       </div>

src/vue-components/drawer/Drawer.vue

@@ -25,7 +25,6 @@
 
 <script>
 import Utils from '../../utils'
-import Events from '../../events'
 import * as theme from '../../theme'
 import Platform from '../../platform'
 
@@ -37,7 +36,6 @@ const
   }
 
 function getCurrentPosition (node) {
-  // console.log('node', node)
   let transform = Utils.dom.style(node, 'transform')
   return transform && transform !== 'none' ? parseInt(transform.split(/[()]/)[1].split(', ')[4], 10) : 0
 }
@@ -66,7 +64,6 @@ export default {
   },
   methods: {
     __matToggleAnimate (percentage, done) {
-      console.log('toggle', this.$refs, this.$refs.content)
       const
         node = this.$refs.content,
         backdrop = this.$refs.backdrop,
@@ -100,19 +97,15 @@ export default {
           let state = window.history.state || {}
           state.__quasar_drawer = true
           window.history.replaceState(state, '')
-          console.log('altered state', window.history.state, window.history.length)
           window.history.pushState({}, '')
-          console.log('pushing state', window.history.length)
           window.addEventListener('popstate', this.__popState)
         }
       }
       else {
         window.removeEventListener('resize', this.close)
         if (!Platform.within.iframe) {
           window.removeEventListener('popstate', this.__popState)
-          console.log('removed popstate')
           if (window.history.state && !window.history.state.__quasar_drawer) {
-            console.log('going back')
             window.history.go(-1)
           }
         }
@@ -307,11 +300,8 @@ export default {
       fn(this.opened ? 0.01 : 1, done)
     },
     __popState () {
-      console.log('popstate')
       if (!Platform.within.iframe) {
-        console.log(window.history.state)
         if (window.history.state && window.history.state.__quasar_drawer) {
-          console.log('closing')
           this.setState(false)
         }
       }
@@ -337,9 +327,7 @@ export default {
       this.width = Utils.dom.width(content)
 
       ;[].slice.call(content.getElementsByClassName('drawer-closer')).forEach(el => {
-        el.addEventListener('click', (event) => {
-          event.stopPropagating()
-          console.log('router-link closing drawer')
+        el.addEventListener('click', () => {
           this.setState(false)
         })
       })
@@ -351,11 +339,9 @@ export default {
       this.__eventHandler = handler => {
         this.close(handler)
       }
-      Events.$on('app::close-drawers', this.__eventHandler)
     })
   },
   beforeDestroy () {
-    Events.$off('app::close-drawers', this.__eventHandler)
     this.setState(false)
   }
 }

src/vue-components/drawer/DrawerLink.vue

@@ -1,14 +1,5 @@
 <template>
-  <div class="item item-link drawer-closer" @click.prevent.stop="click">
-    <router-link
-      ref="link"
-      :to="to"
-      :replace="replace"
-      :append="append"
-      :exact="exact"
-      style="display: none"
-      @click.stop
-    ></router-link>
+  <div class="item item-link drawer-closer" v-link.delay="route">
     <i v-if="icon" class="item-primary">{{icon}}</i>
     <div class="item-content">
       <slot></slot>
@@ -18,13 +9,6 @@
 
 <script>
 export default {
-  props: ['icon', 'to', 'replace', 'append', 'exact'],
-  methods: {
-    click () {
-      setTimeout(() => {
-        this.$refs.link.$el.click()
-      }, 500)
-    }
-  }
+  props: ['icon', 'route']
 }
 </script>

src/vue-directives/link.js

@@ -3,27 +3,49 @@ import Utils from '../utils'
 export default {
   bind (el, binding, vnode) {
     let ctx = {
-      replace: binding.replace,
       route: binding.value,
+      delay: binding.modifiers.delay,
+      active: false,
       go () {
-        vnode.context.$router[ctx.replace ? 'replace' : 'push'](ctx.route)
+        const fn = () => {
+          vnode.context.$router[ctx.route.replace ? 'replace' : 'push'](ctx.route)
+        }
+        if (ctx.delay) {
+          setTimeout(fn, 100)
+          return
+        }
+        fn()
+      },
+      updateClass () {
+        const
+          route = vnode.context.$route,
+          ctxRoute = typeof ctx.route === 'string' ? {path: ctx.route} : ctx.route,
+          prop = ctxRoute.name ? 'name' : 'path'
+        let matched = ctx.route.exact ? route[prop] === ctxRoute[prop] : route.matched.some(r => r[prop] === ctxRoute[prop])
+
+        if (ctx.active !== matched) {
+          el.classList[matched ? 'add' : 'remove']('router-link-active')
+          ctx.active = matched
+        }
       }
     }
 
+    ctx.destroyWatcher = vnode.context.$watch('$route', ctx.updateClass)
+    ctx.updateClass()
     Utils.store.add('link', el, ctx)
     el.addEventListener('click', ctx.go)
   },
   update (el, binding) {
-    let ctx = Utils.store.get('link', el)
     if (binding.oldValue !== binding.value) {
+      let ctx = Utils.store.get('link', el)
       ctx.route = binding.value
-    }
-    if (binding.replace !== ctx.replace) {
-      ctx.replace = binding.replace
+      ctx.updateClass()
     }
   },
   unbind (el) {
-    el.removeEventListener('click', Utils.store.get('link', el).go)
+    let ctx = Utils.store.get('link', el)
+    ctx.destroyWatcher()
+    el.removeEventListener('click', ctx.go)
     Utils.store.remove('link', el)
   }
 }