离子版本:(用“x”检查一个)
[ ] 1.x (对于 Ionic 1.x 问题,请使用 https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
我正在提交一个 ... (用“x”检查一个)
[x] 错误报告
[ ] 功能要求
[ ] 支持请求 => 请不要在此处提交支持请求,请使用以下渠道之一: https : http://ionicworldwide.herokuapp.com/
当前行为:
Ionic 3.5.0 奇怪的 URL 行为
我的应用程序有基本的界面! 一个 LoginPage、SignupPage...登录或注册后它会进入选项卡界面..我想没什么特别的!
首先,“nav/n4”是默认行为吗?
http://localhost :8100/#/nav/n4/login
http://localhost :8100/#/nav/n4/app/tabs/t0/perfil/perfil
我用 ionic g 创建了页面和标签
对于所有页面,我都为它们设置了段,例如,名称如下:
@IonicPage({ 段:'perfil' })
预期行为:
http://localhost :8100/#/login
http://localhost :8100/#/app/perfil
重现步骤:
相关代码:
login.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import {SharedModule} from '../../shared/shared.module';
import { LoginPage } from './login';
@NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
SharedModule
],
exports: [
LoginPage
]
})
export class LoginPageModule {}
login.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, MenuController, LoadingController, AlertController, Events } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ControlValidator } from '../../validators/control-validator';
import { Config } from '../../config/config';
import { Storage } from '@ionic/storage';
import {UserProvider} from '../../providers/user/user.provider';
import {SocialProvider} from '../../providers/social/social.provider';
@IonicPage({
segment:'login'
})
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
user:any = {};
form:FormGroup;
submitted:boolean = false;
private loader:any;
private alert:any;
constructor(
public navCtrl: NavController,
public menuCtrl:MenuController,
public loaderCtrl:LoadingController,
public alertCtrl:AlertController,
public events:Events,
public formBuilder:FormBuilder,
public storage:Storage,
public userService:UserProvider,
public socialService:SocialProvider,
public config:Config) {
this.user = {
email:'',
password:''
}
this.form = formBuilder.group({
email:[this.user.email, Validators.compose([ControlValidator.isEmailValid])],
password:[this.user.password, Validators.compose([Validators.required, Validators.minLength(5)])]
});
}
ionViewDidLoad() {
this.menuCtrl.enable(false);
}
showLoading(){
this.loader = this.loaderCtrl.create({
content: 'Verificando as suas credenciais...'
});
this.loader.present();
}
showAlert(subtitle:string){
this.alert = this.alertCtrl.create({
title: 'LOGIN',
subTitle:subtitle,
buttons:['OK'],
cssClass:'alert-login'
});
this.alert.present();
}
openPage(page:string){
this.navCtrl.push(page);
}
private onError(err:string){
this.showAlert(err);
}
login(){
this.submitted = true;
if(!this.form.valid){
return;
}
this.showLoading();
this.user = this.form.value;
this.userService.login(this.user)
.then(res=>{
if(res) {
this.loader.dismiss()
.then(()=>{
setTimeout(()=>{
this.navCtrl.setRoot('TabsPage');
});
});
}else{
}
})
.catch(this.onError);
}
}
tabs.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TabsPage } from './tabs';
@NgModule({
declarations: [
TabsPage
],
imports: [
IonicPageModule.forChild(TabsPage),
]
})
export class TabsPageModule {}
tabs.ts
import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
@Component({
selector: 'page-tabs',
templateUrl: 'tabs.html'
})
@IonicPage({
segment:'app'
})
export class TabsPage {
perfilRoot = 'PerfilPage';
agendaRoot = 'AgendaPage';
newsRoot = 'NewsPage';
ticketsRoot = 'TicketsPage';
myFestivalRoot = 'MyFestivalPage';
constructor(public navCtrl: NavController) {}
}
perfil.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PerfilPage } from './perfil';
@NgModule({
declarations: [
PerfilPage,
],
imports: [
IonicPageModule.forChild(PerfilPage),
],
exports: [
PerfilPage
]
})
export class PerfilPageModule {}
perfil.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage({
segment:'perfil'
})
@Component({
selector: 'page-perfil',
templateUrl: 'perfil.html',
})
export class PerfilPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad PerfilPage');
}
}
其他信息:
离子信息:(从终端/cmd 提示符运行ionic info
并粘贴下面的输出):
global packages:
@ionic/cli-utils : 1.4.0
Ionic CLI : 3.4.0
local packages:
@ionic/app-scripts : 1.3.12
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework : ionic-angular 3.5.0
System:
Node : v6.5.0
OS : OS X El Capitan
Xcode : Xcode 8.1 Build version 8B62
ios-deploy : 1.9.1
ios-sim : 5.0.13
npm : 3.10.3
团队意识到了这一点。
最后我检查过,这比其他东西的优先级低。
我希望这也能尽快得到解决。
@AmitMY感谢您的回复!!
是的,我也希望如此!! 深度链接会成为这种行为的问题,你不觉得吗?
有没有您知道的解决方法?
我确实认为这是有问题的,我不知道是否存在任何解决方法
我今天要开始做这件事。
谢谢,
担
非常感谢@danbucholtz
干杯
@tattivitorino谢谢你,你已经问过了,我刚刚在论坛上发布了同样的内容https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080
这有什么流程吗?
它已在最新升级中修复,
@拉什克
我确实升级了“npm install [email protected] --save --save-exact”;
还是“ http://localhost :8100/#/nav/n4/start”;
我们在使用 /nav/n4/ 时遇到了同样的问题
Rashnk - 你是说这在 3.5.2 中肯定是固定的吗?
它没有在博客文章中直接解决: http :
是否有修复的更新日志,我们可以在未来检查此类事情?
谢谢 :)
@dev-manager-uk 是的。看这个: https :
太棒了,谢谢你。
我们需要在设置或代码中更改什么吗? 或者它应该 Just Work™。
:D
对我来说,这个问题仍然存在于 3.5.2 和 3.5.3 中。
离子信息
全局包:
@ionic/cli-utils : 1.5.0
Ionic CLI : 3.5.0
本地包:
@ionic/app-scripts : 2.0.2
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework : ionic-angular 3.5.3
系统:
Node : v8.0.0
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.0
ios-sim : 5.0.9
npm : 5.3.0
@rashnk ,我成功升级了。 但问题仍然存在,甚至使用最新版本为延迟加载页面创建一个新项目;
是的。 我错了。 URL 仍然有额外的内容,但我正在使用 ionic serve -l 处理 chrome
好像没问题,看截图
是的,问题是不需要 url。
预期行为:
http://localhost :8100/#/login
http://localhost :8100/#/app/perfil
@danbucholtz我们正在等待您的回复,因此我也有与上面相同的 URL 模式和最新的 Ionic 3.5.3
同样的问题在这里。 升级到 3.5 后,我的应用程序使用深层链接(托管在服务器上的浏览器应用程序)不再按预期工作,因为像“nav/n4”这样的神奇网址。
看起来ionic3.5改变了导航模式,但我希望很快会有详细的文档。
无论如何,感谢 ionic-team 的辛勤工作。
同样的问题在这里。 我们正在开发 PWA 应用程序,深度链接非常重要。
同样在这里。 这阻碍了我们的释放。
@larpo1如果可以的话,我建议你降级,3.5.X 中除了导航之外没有太多变化
大家好! Dan 目前正在致力于缩短我们的 URL 并摆脱其中的许多“魔力”。 我们希望尽快准备好。
谢谢丹! 谢谢贾斯汀!
他们基本上只需要像 Web URL 一样工作
他们应该像这样工作:
https://www.test.com/about
代替:
https://www.test.com/#/nav/n4/about
甚至:
https://www.test.com/#/about
同样在这里。
@dev-manager-uk 关于https://www.test.com/#/about这是另一个主题。
您可以通过更改应用程序模块中的locationStrategy
来删除它:
@NgModule({
imports: [
BrowserModule,
IonicModule.forRoot(AppComponent, {
locationStrategy: "path", // <--- here
}),
...
]
})
谢谢@sergiocarneiro
我会试试的!
你好@jgw96
你有一个大约 eta 版本来修复深层链接吗?
谢谢 :-)
我不得不降级以掩盖这个问题:
“npm 安装[email protected] --save --save-exact”
这将在明天发布。 提交已经在 Github 上,所以我要关闭它。
谢谢,
担
是的,如果有修复就好了
我不确定这是否没有问题,但你们应该每晚使用3.5.3-201707251952
,它有这个修复程序。 如果有问题,请在发布 3.6 之前发布一个问题
可以确认$ npm install [email protected] --save --save-exact
对我有用。 谢谢!
编辑:使用 3.6.0
抱歉,我们遇到了不可预见的问题,明天发货。 如果您想抢先体验,请查看npm install ionic-angular@nightly
。 如果您正在使用选项卡并看到刷新时出现问题,这是我们系统的一个已知限制,它将在 Ionic 4 中通过对 API 的轻微更改得到修复。 同时,您可以在tabUrlPath
上使用ion-tab
来缓解它。 基本上,如果您有一个深层链接segment
和一个tab
具有相同的name/title
,那么这里可能存在勾结。 除此之外,到目前为止,一切都运行良好。
谢谢,
担
@sergiocarneiro不幸的是,添加该设置不会删除nav/n4
也无法直接访问该 url。
可以确认 $ npm install [email protected] --save --save-exact 对我
@numerized您可以改用 3.6.0。
你好,
我在 ionic cli v3.9.2 上,但 URL 栏中仍然有 nav/n4。
其实我什至有
/#/nav/n4/pu/loginpage/nav/n5/pr/privatepage
因为我有一个公共和一个私人导航......
我已经过了 3.6.0 所以不确定问题是什么,除非它引起了大问题
您需要使用 3.6.0 离子角。
谢谢 AmitMY,不幸的是它并没有为我修复它......
我还能做什么?
同样的事情,我在[email protected] 上,总是同样的问题!!!
除了将 ionic 和 ionic-angular 升级到最新版本之外, @danbucholtz还有其他事情要做吗?
对我来说,它使用最新的
因此,如果我运行 ionc-angular 3.6.1 并执行以下操作:
@NgModule({
imports: [
BrowserModule,
IonicModule.forRoot(AppComponent, {
locationStrategy: "path", // <--- here
}),
...
]
})
这个对我有用
大家好! 自从我创建这个问题以来,似乎发生了很多变化! 我可以看到我们之前遇到的部分 url 问题已修复! 对于不在标签系统内的页面,一切正常! 但标签的情况并非如此。
我刚刚创建了一个新的应用程序,其中包含几个页面,例如登录、注册等……而 url 非常适合这些页面!
http://localhost :8100/#/login
http://localhost :8100/#/signup
当我进入选项卡页面(登录时)时,这就是我所拥有的:
http://localhost :8100/#/tabs/tab1/tab1
在这里,我没有在 IonicPage 上设置段,也没有在 ion-tab 上设置 tabUrlPath
http://localhost :8100/#/tabs/tab-1/tab1
在这里,我在 ion-tab 上设置了 tabUrlPath(
http://localhost :8100/#/tabs/tab-1/tab-1
在这里我设置了两个
@IonicPage({
段:'tab-1'
})
在我看来,tabUrlPath 与第一个 /tab-1 段相关,而 IonicPage 段是第二个段!
有没有办法摆脱它们中的任何一个? 我看不出有两个部分的意义! 理想的情况是: http://localhost :8100/#/tabs/tab-1,对吗?
那是我的系统信息:
`
cli 包:(/ionicv2/appv3/app/node_modules)
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
全局包:
cordova (Cordova CLI) : 7.0.1
本地包:
@ionic/app-scripts : 2.1.4
Cordova Platforms : none
Ionic Framework : ionic-angular 3.6.1
系统:
Android SDK Tools : 25.2.5
ios-deploy : 1.9.1
ios-sim : 5.0.13
Node : v6.5.0
npm : 3.10.3
OS : OS X El Capitan
Xcode : Xcode 8.1 Build version 8B62
`
Ionic 3.9.2 对我来说也是一个问题。 我也像其他人一样使用标签。 如有必要,我会提供更多信息。
我得到一个如下所示的网址: http://localhost:8100/create/nav/n9/create
。
我完全同意@tattivitorino 的观点,即实际上不需要在 URL 中包含选项卡名称和页面名称。 Imo 选项卡名称应完全替换为页面名称。
我注意到的另一件事是,在使用选项卡时,我无法获取带参数的 URL。
这不起作用:
http://127.0.0.1 :8100/#/tabs/docs/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b
虽然这样做:
http://127.0.0.1 :8100/#/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b
我想获取的页面具有以下段定义:
segment: "documents/:documentId"
自我之前的评论以来,刚刚使用 3.9.2 进行了升级,它显示 /nav/n4/ 。 删除此内容的任何更新还是我应该降级到 3.6.0?
编辑:忽略这一点,看起来我的 package-lock.json 在 npm 中的问题更多,强制从我的 package.json 安装npm install --no-shrinkwrap
似乎可以解决问题并正确安装 3.9.2
我正在运行 3.9.2。 问题仍然存在。
在 3.9.2 上也有这个问题。
例如:/nav/n5/MasterLogin
我让这个工作正常,然后开始制作 /nav/ 路径..也使用 3.9.2 !
我发现问题是因为我在主页中有多个/开关ion-nav
(试图显示或不显示离子分裂窗格)
@mariohmol为我解决了这个问题。 感谢您将其包括在内。
感谢您的问题! 此问题已被锁定,以防止发表与原始问题无关的评论。 如果使用最新版本的 Ionic 仍然存在问题,请创建一个新问题并确保模板已完整填写。
最有用的评论
我今天要开始做这件事。
谢谢,
担