相关推荐：《angular教程》
一、 angular 创建一个默认带路由的项目1、命令创建项目
ng new ng-demo --skip-install
2、创建需要的组件
ng g component components/homeng g component components/newsng g component components/newscontent
3、找到 app-routing.module.ts 配置路由
引入组件
import { homecomponent } from './components/home/home.component';import { newscomponent } from './components/news/news.component';import { productcomponent } from './components/product/product.component';
配置路由
const routes: routes = [{path: 'home', component: homecomponent},{path: 'news', component: newscomponent},{path:'product', component:productcomponent },{path: '*', redirectto: '/home', pathmatch: 'full' }];
4、找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由
4a249f0d628e2318394fd9b75b4636b1 56a1161b924d6686cc727c2a02984811首页5db79b134e9f6b82c0b36e0489ee08ed 36183eacdc5ae4f63b4c7f4d41bc053d新闻5db79b134e9f6b82c0b36e0489ee08ed473f0a7621bec819994bb5020d29372ab06060c1b765d597eda031c226772d27d643f9f2456fe4db0e530134a61924e2
二、angular routerlink 跳转页面默认路由56a1161b924d6686cc727c2a02984811首页5db79b134e9f6b82c0b36e0489ee08ed36183eacdc5ae4f63b4c7f4d41bc053d新闻5db79b134e9f6b82c0b36e0489ee08ed
//匹配不到路由的时候加载的组件 或者跳转的路由{ path: '**', /*任意的路由*/ // component:homecomponent redirectto:'home'}
三、angular routerlinkactive 设置 routerlink 默认选中路由4a249f0d628e2318394fd9b75b4636b1 4ff6262d1780fa4d02b3687e63326abf 首页 5db79b134e9f6b82c0b36e0489ee08ed e26c31f3dfb99aa7dd58e8a135cc3474 新闻 5db79b134e9f6b82c0b36e0489ee08ed473f0a7621bec819994bb5020d29372a
4a249f0d628e2318394fd9b75b4636b1 4e338aaf70b516f2cf48918ad5857ebb首页5db79b134e9f6b82c0b36e0489ee08ed d5301c0f3080def38baf5de053384a9d新闻5db79b134e9f6b82c0b36e0489ee08ed473f0a7621bec819994bb5020d29372a
四、动态路由4.1.问号传参跳转方式，页面跳转或js跳转
问号传参的url地址显示为 …/list-item?id=1
queryparams属性是固定的
cc2c13ba82bb18e81c98a66cb13ad42d
{{ item.name }}
//js跳转
//router为activatedroute的实例
import { router } from '@angular/router';.constructor(private router: router) {}.this.router.navigate(['/newscontent'],{ queryparams:{ name:'laney', id:id }, skiplocationchange: true //可以不写，默认为false,设为true时路由跳转浏览器中的url会保持不变，传入的参数依然有效});
获取参数方式
import { activatedroute } from '@angular/router';constructor(public route:activatedroute) { }ngoninit() { this.route.queryparams.subscribe((data)=>{ console.log(data); })}
4.2 路径传参路径传参的url地址显示为 …/list-item/1
<a [routerlink]="[’/list-item’, item.id]"> {{ item.name }}//js跳转 //router为activatedroute的实例this.router.navigate([’/list-item’, item.id]);
路径配置：
{path: ‘list-item/:id’, component: listitemcomponent}
获取参数方式
this.route.params.subscribe( param => { this.id= param['id']; })
五、父子路由1、创建组件引入组件
import { welcomecomponent } from ‘./components/home/welcome/welcome.component’; import { settingcomponent } from ‘./components/home/setting/setting.component’;
2、配置路由
{ path:'home', component:homecomponent, children:[{ path:'welcome', component:welcomecomponent },{ path:'setting', component:settingcomponent }, {path: '**', redirectto: 'welcome'} ]},
3、父组件中定义router-outlet
更多编程相关知识，请访问：编程视频！！
以上就是详解angular中的路由及其用法的详细内容。