vue.jsスラッグと番号の動的ルートマッチング

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 

...

：私はこのようなURLを持っています。その番号はプロダクト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のような数のリンクのみをサポートすることができるという追加ボーナスを持っています。