vue的页面跳转方式和传值、取值

1、通过router-link进行跳转,传递方式:

  • 使用query传递参数,路由必须使用path引入,

  • 使用params传递参数,路由必须使用name引入

<router-link :to="{path: '/home', query: {key: 'hello', value: 'world'}}">
  <button>跳转</button>
</router-link>       

//跳转地址 ====> /home?key=hello&value=world

//取值 ====> this.$route.query.key


<router-link :to="{name: '/home', params: {key: 'hello', value: 'world'}}">
  <button>跳转</button>
</router-link>  

//跳转地址 ====> /home ??? (暂时没用过)

//取值 ====> this.$route.params.key

2、$router方式跳转:

this.$router.path({
  path: '/detail',
  query: {
    name: 'admin',
    code: 10021
  }

});

//跳转地址 ====> /detail?name=admin&code=10021

//取值 ====> this.$route.query.name
 

this.$router.path({
  name: 'detail',
  params: {
    code: 10021
  }
});

//跳转地址 ====> /detail/10021

//取值 ====> this.$route.params.code
posted @ 2021-08-13 16:14  会飞的小白  阅读(155)  评论(0编辑  收藏  举报