CODEWITHSUNDEEP
vue.jsvue-componentvue-router
Isaac Joy
Isaac Joy

Reputation: 95

Wildcard routes with Vue.js

I'm trying to match a Vue.js route like so:

{
  path: '/#/reset*',
  name: 'Confirm Reset Password',
  meta: { title: `Confirm password reset` },
  component: ConfirmResetPassword
},

to a URL that looks like this 

mywebsite.com/#/reset-password

but it's not working- it just goes to the home page for some reason. Am I doing the wildcard wrong or is the '#' in a reserved namespace?

I also have these two routes:

{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '*',
  name: '404',
  meta: { title: `Page not found` },
  component: Error404
}

**Edit

I have history mode on and the URL is generated from a Django back-end

Upvotes: 2

Views: 9385

Answers (2)

Isaac Joy
Isaac Joy

Reputation: 95

If history mode is on I can't match against a URL provided pre-fixed with '#' - solution is to change the URL being generated on the back-end.

Upvotes: -1

acdcjunior
acdcjunior

Reputation: 135862

The /# shouldn't be a part of the path. Use like below:

{
  path: '/reset*',
  name: 'Confirm Reset Password',
  meta: { title: `Confirm password reset` },
  component: ConfirmResetPassword
},

The fact that you have /# in your URLs is because you don't have History mode on (which is not a problem, it is just a different way of using vue-router). So you declare your paths without /#.

Upvotes: 3

Related Questions