vue.js - vue.js的Slug与数字的动态路由匹配

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

...

我需要编写一个路径模式，该模式将与子弹的最后一个数字匹配。该数字是产品ID。

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

在这种情况下，我可以使用哪种模式？还是您会建议针对eShop产品的更好解决方案？

Answer 1

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

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

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

这具有能够支持仅数字链接(如 /product/123)的额外好处。