- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
前面的angular6.0教程文章中,我们实现的数据调用和展示都是在同一个页面的。而我们开发的angular6.0的项目不可能只有一个页面,如:网站首页、文章列表页、文章详情页,我们想要的效果是,home页面显示home内容,而list页面显示list列表内容。angular6.0要想实现多页面展示,需要通过路由来实现。那么,怎么来使用angular6.0路由呢?
第一步:给项目添加angular6.0路由模块:
添加angular路由分为2种情况:
情况1:新建项目时就添加路由:
ng new demo --routing 【新建demo项目的同时,就创建好angular路由】
情况2:在老项目中添加路由【即项目已创建好了,只是没有添加路由】:
ng g module app-routing --flat --module=app
能过上面的命令,在项目app目录下会创建一个app-routing.module.ts文件,并且同时在app.module.ts文件中自动添加对app-routing路由的引入和声明,而不需要手动引入。
第二步:在app-routing文件中引入RouterModule模块【如果是情况1添加的路由,可以省略这一步】:
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
第三步:为项目设置路由:
根据前面章节我们创建的组件,有home组件和list组件,在没有设置angular6.0路由时,我们在浏览器地址栏中输入地址:http://localhost:4200/home和http://localhost:4200/list时,页面展示的内容不会发生变化。我们来为home和list来设置路由:
const routes: Routes = [ //地址栏是home时调用homecomponent组件 { path:'home', component:HomeComponent }, //地址栏是list时调用listcomponent组件 { path:'list', component:ListComponent }, //地址栏是任意字符时,调用 homecomponent组件,即默认路由 { path:'**', redirectTo:'/home' } //这里是2个*号,这个必须放在最后面 ];
通过上面几步,我们就为项目添加了angular6.0路由功能,并为项目的home组件和list组件分别设置了路由以及默认路由。
重新学习一下路由知识,可以!
很有用,刚好在学angular,谢谢!
哈哈,彼此彼此,我也是刚刚在看在学。一起加油。
都是这个套路的,赚积分…
新手难道不该送送几个积分么?
我也是赚积分的呢哈哈哈哈
我是来赚积分得,哈
进来看看