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 产品问题的方法吗？

Answer 1

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

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

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

这有额外的好处，可以支持像 /product/123 这样的纯数字 link。

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

vue.js dynamic route matching of slug with number

vue.js

vue-router

vuejs2