vue.js 슬러그와 번호의 동적 경로 일치

Question

경로 패턴과 관련하여 도움이 필요합니다. 나는이 같은 URL이 :

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처럼 연결 A-단지를 지원할 수있는의 추가 보너스가 있습니다.