Question

我对Aurelia很陌生，我很喜欢倾斜曲线的每一分钟。我正在为es6应用程序使用Aurelia的Skeleton Navigation，我目前正在开发一个简单的应用程序，用户登录并在提供某些细节后提交故事。我的应用程序流程非常简单：

Login Screen --> Screen where user provides phone number --> User submit's story

我的导航栏有“主页”和“提交故事”。但是，我想隐藏“提交故事”菜单项，直到用户提供了他的电话号码。所以基本上在电话号码提交上，如果函数返回true，我需要显示菜单项。

我认为有两种方法可以解决这个问题。一种方法是根据电话号码是否提交将导航项绑定到真值或假值，另一种是在成功提交电话号码时动态添加路由。哪一个更好用？我非常感谢在正确的方向上轻推。

我尝试为路由分配一个布尔变量，但它给了我混合的结果。请参阅下面的代码（我只包含相关代码）：

check_phone = false;

configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
        {route: ['', 'home'], name: 'home', moduleId: 'home', nav: check_phone, title: 'Home'},
        {route: 'story', name: 'story', moduleId: 'story', nav: check_phone, title: 'Submit a Story'}
    ]);
    config.mapUnknownRoutes('/');
    this.router = router;
}

phone_submit() {
    if(success) this.check_phone = true;
}

我也试过动态添加路线，但它不起作用：

configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
        {route: ['', 'home'], name: 'home', moduleId: 'home', nav: check_phone, title: 'Home'},
    ]);
    config.mapUnknownRoutes('/');
    this.router = router;
}

phone_submit() {
    if(success) 
        this.router.addRoute({route: 'story', name: 'story', moduleId: 'story', nav: true, title: 'Submit a Story'})
        this.router.refreshNavigation();
}

请帮助我。谢谢你的时间！

Answer 1

路线上实际上有一个设置属性。您可以将settings属性设置为可以操作的对象。您可以在渲染路线时使用此对象，如果具有特定属性，则导航栏会将其隐藏。

e.g。 {route：user /：id'，名称：用户， moduleId：'。/ Aurelia / users， nav：false，标题：'用户'，设置：{isShown：true} }

查看关于主题的链接的文章，该文章更详细地解释了使用settings属性;

https://www.linkedin.com/pulse/routing-aurelia-framework-mike-gold?trk=mp-author-card

如何使用Aurelia基于用户的状态显示/隐藏导航元素

1 个答案: