vue.js slug 与数字的动态路由匹配答案

【问题标题】：vue.js dynamic route matching of slug with numbervue.js slug 与数字的动态路由匹配
【发布时间】：2017-11-23 21:28:40
【问题描述】：

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

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 product slug 提出更好的解决方案？

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

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

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

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

这还有一个额外的好处是能够支持像/product/123这样的纯数字链接。

【讨论】：