angularvue路由传参对比

Posted 2021-09-27 jsure

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`
  }