当前位置: 移动技术网 > IT编程>开发语言>.net > Angular实现登录注册页面路由跳转

Angular实现登录注册页面路由跳转

2020年10月25日  | 移动技术网IT编程  | 我要评论
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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网