vue/react 路由匹配問題，/:id 與其他頁面影響

現在頁面上好多路由配置需要用id來區分不用數據頁
所以問題就會出現：配的/:id路由會影響其他路由
就是例如我有一個 /tab的頁面訪問時會變成 /:id的頁面

問題原因很簡單就是路由匹配不嚴格導致的

舉例下面兩個路由

{
    path: "/:id",
    component: Home,
},
{
    path: "/tab",
    component: Tab
},

vue

其實用id來寫，總給開發這一個錯覺就是id就是int類型所以導致路由進來直接匹配 /:id 把所有以及路由都跳到這個路由上，所以把id正則一下數字，這樣只能匹配爲數字的以及路由，其他路由就可以正常配了，也不會亂入的情況

{
	path: "/:id(\\d+)",
	component: Home
}，
{
	path: "/", //默認路由
	redirect: "/8"
}

如果配置路由/a/:id，如果想要沒有id情況也能訪問頁面可以在路由上配置？來過濾

{
    path: "/complaint/:id(\\d+)?",
    component: Complaint
},

react

<Route path="/:id" component={SkuWeb} />
<Route path="/tab" component={Tab} />
<Redirect to="/8" />

這個也是id的問題，所以還是正則過濾，react有一個exact屬性也可以加上，這樣能更嚴格

<Route exact path="/:id(\d+)" component={SkuWeb} />
<Route path="/tab" component={Tab} />
<Redirect to="/8" />