Question

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

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

假设我的网页网址是：abc.com/dashboard
此页面有一个导航菜单和一个类名为“main-container”的div部分
用户点击导航菜单中的链接，路由器将网址移至说abc.com/view/listofXYZ。所以，我们的“主容器”div将加载url的响应abc.com/view/listofXYZ
现在是另一个用户，直接转到abc.com/view/listofXYZ网址并点击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来定义状态和网址。即使用户直接在浏览器中输入了网址，只有在状态中定义的网址匹配时才能正确处理。

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作为匹配的网址/home/list，他将被带到home/list页面，如果他输入了任何错误的网址，那么他将被带到home页面，因为otherwise方法。

如果react / sammy路由器中存在类似的内容，请执行此操作以获得更好的解决方案

单页应用网址管理

2 个答案: