单页应用网址管理

Question

通常在单页应用程序（spa）中，我确实有一个单页，其中有一个侧导航菜单。在该菜单中，有多个锚标记。
那些锚标签的 url 将由 angular/react/sammy js 路由器处理，主 div 将根据控制器返回的 html 刷新。
很简单，对吧？
但是想象一个场景，用户通过浏览器地址栏直接访问锚标记 url。那么只有返回的 html 段会被加载到整个页面。
有没有办法处理这种情况？我的意思是，每当用户直接访问该网址时，他/她都会得到正确的地址？

编辑： 可能是我对问题陈述不太清楚。让我详细说明一下：

• 假设我的页面网址是：abc.com/dashboard
• 此页面有一个导航菜单和一个类名为“main-container”的 div 部分
• 用户单击导航菜单中的链接，路由器将 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 中，我们使用$stateProvider 的ui-router 来定义状态和url。即使用户直接在浏览器中输入 url，也只有在 state 中定义的 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 路由器中存在类似情况，请这样做以获得更好的解决方案