chore: Handling the link event to keep "exact" from the "vue-router"

Author: ktquez

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   env: {
-    "cypress/globals": true,
+    'cypress/globals': true,
     browser: true,
     node: true
   },
@@ -10,9 +10,9 @@ module.exports = {
     'plugin:vue/essential'
   ],
   plugins: [
-    "cypress"
+    'cypress'
   ],
   // add your custom rules here
   rules: {},
   globals: {}
-}
+}

src/VueSkipTo.vue

@@ -1,5 +1,9 @@
 <template>
-  <a class="vue-skip-to" :href="to">
+  <a
+    class="vue-skip-to"
+    :href="to"
+    @click.prevent="handleFocusElement"
+  >
     <slot>{{ text }}</slot>
   </a>
 </template>
@@ -19,22 +23,9 @@ export default {
     }
   },
 
-  mounted () {
-    this.init()
-  },
-
-  beforeDestroy () {
-    window.removeEventListener('hashchange', this.handleFocusElement, false)
-  },
-
   methods: {
-    init () {
-      window.addEventListener('hashchange', this.handleFocusElement, false)
-      if (location.hash && location.hash.substring(1)) this.handleFocusElement()
-    },
-
-    handleFocusElement () {
-      this.focusElement(location.hash.substring(1))
+    handleFocusElement ({ target }) {
+      this.focusElement(target.getAttribute('href').substring(1))
     },
 
     focusElement (id) {