I'm using Vue Router in Vue project as a router and I have this routes :

0: {path: '/', component: {…}, children: Array(1)}
1: {path: '/readme', component: {…}, children: Array(1)}
2: {path: '/modal', component: {…}, children: Array(1)}
3: {path: '/table', component: {…}, children: Array(1)}
4: {path: '/:locale', component: {…}, children: Array(1), beforeEnter: ƒ}
5: {path: '/:locale/readme', component: {…}, children: Array(1), beforeEnter: ƒ}
6: {path: '/:locale/:all(.*)*', children: Array(1), component: ƒ, beforeEnter: ƒ}
7: {path: '/:locale/modal', component: {…}, children: Array(1), beforeEnter: ƒ}
8: {path: '/:locale/table', component: {…}, children: Array(1), beforeEnter: ƒ}
9: {path: '/:all(.*)*', children: Array(1), component: ƒ}
length: 10
[[Prototype]]: Array(0)

When I tried to http://localhost:4000/id/modal it does work, but when I tried to http://localhost:4000/id it always go to the /:all(.*)* instead. Why did that happen?

Also how could I change /:locale to OR logic like /(id/jp) , is that possible?