vue router中參數(shù)傳遞的方式是什么

這篇文章主要介紹“vue router中參數(shù)傳遞的方式是什么”，在日常操作中，相信很多人在vue router中參數(shù)傳遞的方式是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue router中參數(shù)傳遞的方式是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

vue-router傳遞參數(shù)分為兩大類

• 編程式的導航 router.push

• 聲明式的導航 <router-link>

編程式的導航 router.push

編程式導航傳遞參數(shù)有兩種類型：字符串、對象。

字符串

字符串的方式是直接將路由地址以字符串的方式來跳轉(zhuǎn)，這種方式很簡單但是不能傳遞參數(shù)：

this.$router.push("home");

對象

想要傳遞參數(shù)主要就是以對象的方式來寫，分為兩種方式：命名路由、查詢參數(shù)，下面分別說明兩種方式的用法和注意事項。

命名路由

命名路由的前提就是在注冊路由的地方需要給路由命名如：

命名路由傳遞參數(shù)需要使用params來傳遞，這里一定要注意使用params不是query。

目標頁面接收傳遞參數(shù)時使用params

特別注意：命名路由這種方式傳遞的參數(shù)，如果在目標頁面刷新是會出錯的

使用方法如下：

this.$router.push({ name: 'news', params: { userId: 123 }})

代碼如下：

<template>
 <div class="hello">
  <h2>{{ msg }}</h2>
  <button @click="routerTo">click here to news page</button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 methods:{
  routerTo(){
   this.$router.push({ name: 'news', params: { userId: 123 }});
  }
 }
}
</script>

<style>
</style>接受傳遞的參數(shù)：<template>
 <div>
  this is the news page.the transform param is {{this.$route.params.userId}}
 </div>
</template>
<script>
</script>

運行效果如下：

查詢參數(shù)

查詢參數(shù)其實就是在路由地址后面帶上參數(shù)和傳統(tǒng)的url參數(shù)一致的，傳遞參數(shù)使用query而且必須配合path來傳遞參數(shù)而不能用name，目標頁面接收傳遞的參數(shù)使用query。

注意：和name配對的是params，和path配對的是query

使用方法如下：

this.$router.push({ path: '/news', query: { userId: 123 }});代碼如下：<template>
 <div class="hello">
  <h2>{{ msg }}</h2>
  <button @click="routerTo">click here to news page</button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 methods:{
  routerTo(){
   this.$router.push({ path: '/news', query: { userId: 123 }});
  }
 }
}
</script>

<style>
</style>接收參數(shù)如下：<template>
 <div>
  this is the news page.the transform param is {{this.$route.query.userId}}
 </div>
</template>
<script>
</script>

運行效果如下：

聲明式的導航

聲明式的導航和編程式的一樣，這里就不在過多介紹，給幾個例子大家對照編程式理解，

例子如下：

字符串

<router-link to="news">click to news page</router-link>

命名路由

<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

運行效果如下：

查詢參數(shù)

<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

運行效果如下：

到此，關(guān)于“vue router中參數(shù)傳遞的方式是什么”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>