依据 router 上的存储对象名分 2 类

1. params
2. queryParams

依据 href 的展示和应用办法分 3 类

1. 500/jack (params)
2. /500;name=jack (params)
3. /500?name=jack (queryParams)

以下依照 3 类的传值办法提供代码样例

Angular

1 500/jack

// routes 的配置
{path: '500/:name', component: Exception500Component}
"500/jack" // 地址体现
// 导航的两种写法
<button [routerLink]="['/500','jack']"> 测试 1 </button>
  navigateTo(){this.router.navigate(['/500','jack'])
  }
  
 // 接管参数的两种写法 依据须要来抉择
activatedRoute.snapshot.params // {name:'jack'}
activatedRoute.params.subscribe(data=>{//data {name:'jack'}
 })

2 /500;name=jack

 // 地址体现
"/500;name=jack"
// 导航的两种写法
<button [routerLink]="['/500',{name:'jack'}]"> 测试 1 </button>
navigateTo(){this.router.navigate(['/500',{name:'jack'}])
  }
// 接管参数的两种写法 依据须要来抉择
activatedRoute.snapshot.params // {name:'jack'}
activatedRoute.params.subscribe(data=>{//data {name:'jack'}
 })

3 /500?name=jack

"/500?name=jack" // 地址体现
<button [routerLink]="['/500']" [queryParams]="{name:'jack'}"> 测试 1 </button>
navigateTo(){this.router.navigate(['/500'],{queryParams:{name:'jack'}})
 }
 // 接管参数的两种写法 依据须要来抉择
activatedRoute.snapshot.queryParams // {name:'jack'}
activatedRoute.queryParams.subscribe(data=>{//data {name:'jack'}
})

vue-router

(未完待续)

1 500/jack

// routes 的配置
{path: '500/:name', component: Exception500Component}
"500/jack" // 地址体现
// 导航的两种写法
<button [routerLink]="['/500','jack']"> 测试 1 </button>
  navigateTo(){this.$router.push(['/500/jack'])
  }
  
 // 接管参数的两种写法 依据须要来抉择
this.$route.params // {name:'jack'}

2 /500;name=jack

 // 地址体现
"/500;name=jack"
// 导航的两种写法
<button [routerLink]="['/500',{name:'jack'}]"> 测试 1 </button>
navigateTo(){this.router.navigate(['/500',{name:'jack'}])
  }
// 接管参数的两种写法 依据须要来抉择
activatedRoute.snapshot.params // {name:'jack'}
activatedRoute.params.subscribe(data=>{//data {name:'jack'}
 })

3 /500?name=jack

"/500?name=jack" // 地址体现
<button [routerLink]="['/500']" [queryParams]="{name:'jack'}"> 测试 1 </button>
navigateTo(){this.router.navigate(['/500'],{queryParams:{name:'jack'}})
 }
 // 接管参数的两种写法 依据须要来抉择
activatedRoute.snapshot.queryParams // {name:'jack'}
activatedRoute.queryParams.subscribe(data=>{//data {name:'jack'}
})