Search code examples
vue.jsrouterhistorymodehashtag

Hash in history mode router, breaks dynamic URL in Vue

Using Vue 2.6.14, Vue Router set to history mode, URL containing a hashtag "#" breaks dynamic path.

const router = new VueRouter({
  base: `${process.env.VUE_APP_PUBLIC_PATH}`,
  mode: 'history',
  routes: [
    {
      path: '/document/:documentId(.*)',
      name: 'Document',
      component: Document,
      props: true
    },
    {
      path: '*',
      name: 'NotFound',
      component: NotFound
    }
  ]
});

URL ending in "/document/#1" returns as empty string for the "documentId" prop.

Solution 
  • documentIdHashtagProof() { return this.documentId ? this.documentId : this.$route.hash; }

    The problem was that the dynamic prop "documentId" was returning empty string and I've solved it by using a computed property that reads the hash.