在Angular中,可以使用Angular的RouterModule
和HashLocationStrategy
来改变URL中的#
。
首先,确保已经在应用程序中导入了RouterModule
和HashLocationStrategy
。
import { RouterModule, Routes, HashLocationStrategy, LocationStrategy } from '@angular/router';
然后,在@NgModule
的providers
数组中配置LocationStrategy
为HashLocationStrategy
,如下所示:
@NgModule({
imports: [RouterModule.forRoot(routes)],
providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
exports: [RouterModule]
})
export class AppRoutingModule { }
接下来,通过在路由配置中添加useHash: true
选项来启用哈希模式。例如:
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
// 其他路由配置
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
最后,确保在应用程序的主模板(通常是app.component.html
)中使用router-outlet
来显示路由组件的内容:
这样配置后,当路由改变时,URL中的#
符号将会被添加或更改。例如,从/home
导航到/about
时,URL将会变为/#/about
。