单页应用网址管理

阿比娜卜·坎拉(Abhinab kanrar)

通常在单页应用程序(spa)中,我确实有一个页面,其中有一个sidenav菜单。在该菜单中,有多个锚标签。
这些锚标记的url将由angular / react / sammy js路由器处理,并且主div将基于从控制器返回的html进行刷新。
很简单,对不对?
但是,设想一种场景,其中用户通过浏览器地址栏直接访问定位标记URL。那么只有返回的html段将被加载到整个页面。
有什么办法可以处理这种情况?我的意思是说,每当用户直接访问该URL时,他/她都会得到适当的寻址吗?

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

  • 假设我的页面网址是:abc.com/dashboard
  • 该页面具有一个导航菜单和一个div部分,其类名称为“ main-container”
  • 用户单击导航菜单中的链接,路由器将URL移至例如abc.com/view/listofXYZ。因此,我们的“主容器” div将加载url abc.com/view/listofXYZ的响应
  • 现在,另一个用户可以直接转到abc.com/view/listofXYZ网址并点击eneter。然后,该页面将仅包含URL的响应html,即所有导航菜单和div都消失了。


我的问题是,我们可以实现某种设计方法,以便使这两种方法很好地工作吗?

完美先生

最好选择有角度的,ui-router而不是sammy js router,当然我对此一无所知。但是angular-ui-router,我们通过定义状态和网址$stateProviderui-router即使用户直接在浏览器中输入了url,也只有在状态中定义的url匹配时,才能正确寻址该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/listURL/home/list匹配,则将其转到home/list页面;如果输入了错误的URL,则home由于otherwise方法将其转到页面

如果在react / sammy路由器中有类似的内容,请这样做以获得更好的解决方案

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

处理单页应用网址路由

来自分类Dev

Google跟踪代码管理器和单页应用

来自分类Dev

jQuery单页移动应用

来自分类Dev

单页应用程序:身份验证令牌管理和浏览器刷新

来自分类Dev

如何为单页AngularJS应用程序实现基本的Spring安全性(会话管理)

来自分类Dev

如何在单页应用程序中使用IndexedDb管理连接

来自分类Dev

如何使用服务于单页应用程序的 ExpressJS 管理丢失的静态文件?

来自分类Dev

动态内容单页应用SEO

来自分类Dev

单页应用的跳出率达到25%

来自分类Dev

什么是单页应用程序(SPA)?

来自分类Dev

从单页应用程序开始

来自分类Dev

Angular中的单页应用程序

来自分类Dev

使用Django的单页应用程序

来自分类Dev

在单页Angular应用中更改视图

来自分类Dev

单页Web应用程序问题

来自分类Dev

jQuery单页移动应用程序

来自分类Dev

使用Restify服务单页Angular应用

来自分类Dev

单页应用程序angularJS

来自分类Dev

Angular中的单页应用程序

来自分类Dev

单页应用程序中的RedirectToAction

来自分类Dev

单页应用程序架构

来自分类Dev

MVC + REST + 嵌套资源 + 单页应用

来自分类Dev

上传文件到单页应用

来自分类Dev

在html5单页应用程序上使用google map时如何管理内存

来自分类Dev

如何在客户端单页应用程序中管理服务器用户会话

来自分类Dev

关于单页或多页应用程序的内存问题

来自分类Dev

node.js和单页Web应用程序

来自分类Dev

企业级系统的单页应用程序

来自分类Dev

Phoenix:如何提供单页应用程序