vue.js dynamic route matching of slug with number

user_4638463 0
Viewed 2164

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?

vue-router vuejs2 vue.js
1 Answers

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.

user_2833660
Related