vue.js slug与number的动态路由匹配

Question

我需要路线模式的帮助。我有这样的网址：

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

...

我需要编写一个与最后一个slug数匹配的路径模式。该号码是产品ID。

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

这种情况下我可以使用哪种模式？或者你会为eShop产品slug建议一个更好的解决方案吗？

Answer 1

您可以创建一个路径表达式，接受/product/和最后一个数字之间的任意数量的字符。

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

演示〜https://jsfiddle.net/fs8zyx22/2/

这还有额外的好处，即能够支持/product/123等数字链接。