angular\vue路由传参对比

Angular

3种传参形式

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

1. params
2. queryParams

根据href的展现和使用方法分3类

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

样例

以下按照3类的传值方法提供代码样例

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

3种传参形式

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

1. params
2. queryParams

根据href的展现和使用方法分3类

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

代码样例

1 500/jack

// routes的配置
{ path: '500/:name',name:"500", component: Exception500Component }
"500/jack" //地址表现
//导航的写法
 <router-link :to="{ name: '500', params:{name:'jack'}}">User</router-link>
  navigateTo(){
     // this.$router.push('/500/jack')
    this.$router.push({path:'/500/jack'});
    this.$router.push({name:'500',params:{name:'jack'}}); //routers必须配置name
  }
  
 //接收参数的写法 根据需要来选择
this.$route.params // {name:'jack'}

2 /500

// routes的配置
{ path: '500/:name',name:'500', component: Exception500Component }
 //地址表现
"/500"   //这种方式路由地址上不显示params参数
//导航的写法
<router-link :to="{ name: '500', params:{name:'jack'}}">User</router-link>
navigateTo(){
    this.$router.push({name: '500',params: {name:"jack"}}); //routers必须配置name
  }
// 接收参数的写法 根据需要来选择
this.$route.params // {name:'jack'}

3 /500?name=jack

"/500?name=jack" //地址表现
<router-link :to="{path:'/500', query:{name:'jack'}}">User</router-link>
navigateTo(){
       this.$router.push({path:'/500',query:{name:"jack"})
 }
 // 接收参数的写法 根据需要来选择
this.$route.query // {name:'jack'}

路由钩子

全局钩子

router.beforeEach((to, from) => {
  // ...
})
router.afterEach((to, from) => {
  // ...
})

守卫

beforeEnter: (to, from, next) => {
        // ...
      }

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    //next()
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    //next()
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }