1. 程式人生 > 其它 >vue的頁面跳轉方式和傳值、取值

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