我正在为我的项目使用Aurelia骨架.一切看起来都很直观,但是我遇到了一个我怀疑相当容易的问题(如果你知道的话).
问题是app.html/app.js最初显示导航栏并加载一些默认样式.
现在我需要一个登录页面,它不会加载任何东西,除了它自己的样式,没有导航栏没有任何东西 - 只是它自己的登录表单.
所以我尝试过这样的事情:
app.js
<template>
<div if.bind="auth.isNotAuthenticated()">
<require from="components/login/index" ></require>
<login router.bind="router"></login>
</div>
<div if.bind="auth.isAuthenticated()">
<require from="nav-bar.html" ></require>
<require from="../styles/styles.css"></require>
<div class="container" id="banner">
<div class="row">
<img src="images/logo.png" />
</div>
</div>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
显然这不起作用(除非你刷新页面/ f5),因为app.js/app.html是始终存在且永不改变的根路由.但我希望标记中的逻辑有助于说明我想要解决的问题?
我猜我只知道当我从登录路线(登录成功)导航到另一条路线时,如何重新加载父路线(app.js).当我退出时,父路线(app.js)也应该再次刷新.然后我的所有问题都将得到解决.
我在这里错过了什么?:-)
要在非视图模型类中获取当前路由,最佳做法是注入路由器并使用this.router.history.fragment?或者这是不是吗?
我有一个Aurelia应用程序,用户可以选择他们当前正在"工作"的公司.应用程序中的每个页面都取决于当前选定的公司,用户可以从下拉菜单中选择新公司.下拉列表是导航栏上的一个组件.
我想要的是让该组件重新加载change.delegate
处理程序上的当前页面而不重新启动应用程序.所以设置window.location.href
是不可能的.
有没有办法迫使aurelia Router
重新加载当前路线/页面?
另一种方法是使用EventAggregator
信号在整个应用程序公司的变化,但这需要或者订阅该事件的每一页上或具有订阅了该事件的一个基类的每一页继承,但这些更多地参与选择.
是否有一种正确的方法可以隐藏Aurelia启动应用程序中的项目.
现在我只是根据自定义属性为每个元素添加一个类.这感觉非常hacky.
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}${!row.isVisible ? 'navbar-hidden' : ''}">
<a href.bind="row.href">${row.title}</a>
</li>
Run Code Online (Sandbox Code Playgroud) 在应用程序中,我希望导航到home/contract-view/10
一个动作.试着
this.router.navigateToRoute(`home/contract-view`, { id: 10}, { absolute: true });
Run Code Online (Sandbox Code Playgroud)
失败了 Route home/contract-view not be found
另一个尝试:
this.router.navigate(`#/home/contract-view`, { id: 10});
Run Code Online (Sandbox Code Playgroud)
失败了Route not found: contract-view(…)
如何实现这一目标?App.ts:
configureRouter(config: RouterConfiguration, router: Router) {
config.title = 'Contracts Portal';
config.map([
{ route: ['', 'dummy'], name: 'dummy', moduleId: 'dummy', nav: false, title: 'Dummy', settings: { pos: 'left' } },
{ route: 'home', name: 'home', moduleId: 'home', nav: true, title: 'Home', settings:{pos: 'left', class: 'home' }, auth: true },
]);
this.router = router;
} …
Run Code Online (Sandbox Code Playgroud) 使用aurelia.io框架路由器时,读取和设置查询字符串的首选方法是什么?
例如,在网址中: http://www.myapp.com/#/myroute1/?s=mystate
我如何阅读和设置?s=mystate
网址的一部分并让aurelia路由器正确导航并记住该状态,这样每当我到达我的route1
viewmodel时,我都可以读取该状态变量并对其执行某些操作?
javascript query-string aurelia aurelia-navigation aurelia-router
假设我们在Aurelia中有一个名为UserRouter的组件,它是一个子路由器,处理到UserProfile,UserImages和UserFriends的路由.
我希望UserRouter从API(在canActivate上)加载用户,然后将此用户数据传递给子组件.
加载数据很好,我如何将其传递给子组件,以便他们都可以读取它?例如放置属性<router-view>
.
我已经在子组件的bind()方法上尝试了bindingContext参数,但这没有用.
谢谢
我想在没有路由的情况下更新地址栏中的url-params.但我不知道如何使用Aurelia-router从视图模型中做到这一点.
在我的情况下,我在URL中发送ID,由视图模型的activate-method拾取.
这条路线是这样的: HTTP://本地主机:3000 /#/测试/产品0 = 2599037842&1 = 2599080552
然后我希望能够从URL中删除ID 而不重新激活视图模型,url结果例如: http:// localhost:3000 /#/ test/products?0 = 2599037842
希望在Aurelia-router中有这方面的支持
谢谢!/麦克风