單頁應用網址管理

Question

通常在單頁應用程序（spa）中，我有一個頁面，我有一個sidenav菜單。 在該菜單中，有多個錨標簽。
這些錨標記的url將由angular / react / sammy js路由器處理，主div將根據控制器返回的html進行刷新。
很簡單吧？
但想象一下場景，用戶通過瀏覽器地址欄直接訪問錨標記URL。 然后只將返回的html段加載到整個頁面。
有沒有辦法處理這種情況; 我的意思是，無論何時用戶直接訪問網址，他/她都會得到妥善解決？

編輯：可能我不太清楚問題陳述。 讓我詳細說明一下：

• 假設我的頁面網址是：abc.com/dashboard
• 這個頁面有一個導航菜單和一個div類，其類名是“main-container”
• 用戶單擊導航菜單中的鏈接，路由器將URL移動到說abc.com/view/listofXYZ。 因此，我們的“主容器”div將加載url abc.com/view/listofXYZ的響應
• 現在是另一個用戶，直接轉到abc.com/view/listofXYZ url並點擊eneter。 然后，頁面將只包含url的響應html，即所有導航菜單和div都消失了。

我的問題是，我們可以實施一些設計方法，以便這兩種方法運作良好嗎？

Answer 1

使用React路由器，您可以簡單地處理onEnter事件，在用戶給出新URL時觸發。 你可以這樣做：

const onEnter = (e) => {
    console.log(e.location.pathname);
}

/* ... */

<Route path="/" onEnter={onEnter} component={MyComponent} />

此示例應在給定時在控制台中記錄新URL。 您可以根據需要進一步解釋它以進行適當的變異。

Answer 2

最好去角度ui-router而不是sammy js router ，當然我不知道它。 但是在angular-ui-router ，我們通過使用ui-router $stateProvider來定義狀態和URL。 即使用戶直接在瀏覽器中輸入了網址，只有在狀態中定義的網址匹配時才會正確處理。

https://github.com/angular-ui/ui-router/tree/legacy請點擊此處獲取更多信息。

這是一個例子，

$stateProvider.state('',{
   url: '/',
   tempate: 'path/to/.html',
   controller: 'controllerToHandle'
})
.state('home', {
   url: '/home',
   template: 'path/to/home.html',
   controller: 'HmeCtrl'
})
.state('home.list',{  //defines child states with dot
   url: '/list', //shows url as home/list because it is a child state
   template: 'path/to/list.html'
})

如果沒有匹配的路徑，請使用$urlRouterProvider.otherwise('/')同樣，用戶可以從home遍歷到list ，例如， www.my-app.com是您的主機名。 如果他輸入www.my-app.com/home/list作為url /home/list匹配，他將被帶到home/list頁面，如果他輸入了任何錯誤的url，那么他將被帶到home ， otherwise方法。

如果react / sammy路由器中存在類似的內容，請執行此操作以獲得更好的解決方案