依据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'}
})