要在前端隐藏URL,可以使用Angular的路由器来实现。以下是一个示例代码:
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [BrowserModule, RouterModule.forRoot(routes)],
declarations: [AppComponent, HomeComponent, AboutComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html:
home.component.ts:
import { Component } from '@angular/core';
@Component({
template: 'Home
'
})
export class HomeComponent { }
about.component.ts:
import { Component } from '@angular/core';
@Component({
template: 'About
'
})
export class AboutComponent { }
通过上述代码,你可以在浏览器中访问http://localhost:4200
来访问首页,访问http://localhost:4200/about
来访问关于页面。这样,URL地址栏上不会显示具体的组件路径,而是通过路由器进行导航隐藏了URL的细节。