Angular实现登录注册页面路由跳转
程序员文章站
2022-03-21 22:39:07
app.module.ts:import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';// import { RouterModule } from '@angular/router';import { RouterModule, Routes } from '@angular/router';import { AppComponent } from './a...
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// import { RouterModule } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginDemoComponent } from './login-demo/login-demo.component';
import { RegisterDemoComponent } from './register-demo/register-demo.component';
const appRoutes: Routes = [
{ path: 'login-demo', component: LoginDemoComponent },
{ path: 'register-demo', component: RegisterDemoComponent },
{ path: '', redirectTo: '/login-demo', pathMatch: 'full' },
];
imports: [
BrowserModule,
RouterModule.forRoot([
{path: 'login-demo', component: LoginDemoComponent},
{path: 'register-demo', component: RegisterDemoComponent},
{ path: '', redirectTo: '/login-demo', pathMatch: 'full' },
]),
],
app.component.html:
<router-outlet></router-outlet>
bootstrap样式 在style.css里面全局配置
@import "~bootstrap/dist/css/bootstrap.css";
登录页面跳转:
<div class="col-sm-offset-2 col-sm-10 ">
<a class="button btn-success" routerLink="/register-demo" routerLinkActive="activebutton">Sign in</a>
<button class="btn btn-default " routerLink="/register-demo">Sign in</button>
</div>
本文地址:https://blog.csdn.net/weixin_45202083/article/details/109278810
下一篇: 光影魔术手怎么给照片添加日式小清新效果?
推荐阅读
-
jsp跳转页面的方式(jsp实现注册登录界面跳转方法)
-
jsp跳转页面的方式(jsp实现注册登录界面跳转方法)
-
Android利用CountDownTimer实现倒计时功能 Android实现停留5s跳转到登录页面
-
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
-
ASP.NET实现个人信息注册页面并跳转显示
-
vue实现未登录跳转到登录页面的方法
-
angular 未登录状态拦截路由跳转的方法
-
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
-
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
-
Angular4.x通过路由守卫进行路由重定向,实现根据条件跳转到相应的页面