vue.js dynamic route matching of slug with number

Question

I need help with a route pattern. I have URLs like this:

http://example.com/product/product-title-51
http://example.com/product/another-product-title-137
http://example.com/product/another-product-45-title-with-number-288-anywhere-178

...

I need to write a path pattern which will match the last number of a slug. That number is a product ID.

const router = new VueRouter({
    routes: [{
        path: '/product/:product',
        component: PageProduct,
        name: 'Product'
    }]
})

What pattern can I use for this case? Or would you suggest a better solution for eShop product slug?

Phil · Accepted Answer · 2017-11-23 23:11:58Z

4

You can create a path expression that accepts any number of characters between /product/ and the last number like this.

path: '/product/(.*-)?:product(\\d+)'

Demo ~ https://jsfiddle.net/fs8zyx22/2/

This has the added bonus of being able to support a number-only link like /product/123.

edited Nov 23, 2017 at 23:11

answered Nov 23, 2017 at 23:00

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js dynamic route matching of slug with number

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related