this.$router.push攜帶參數(shù)跳轉(zhuǎn)頁面怎么實現(xiàn)

這篇“this.$router.push攜帶參數(shù)跳轉(zhuǎn)頁面怎么實現(xiàn)”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“this.$router.push攜帶參數(shù)跳轉(zhuǎn)頁面怎么實現(xiàn)”文章吧。

前言

this.$router.push進(jìn)行頁面跳轉(zhuǎn)時。攜帶參數(shù)有params和query兩種方式。

一、params和query使用方式

query方式：
this. r o u t e r . p u s h ( p a t h : ′ t e s t Q u e r y ′ , q u e r y : t e s t Q u e r y : ′ t e s t Q u e r y ′ ) ， 傳 遞 的 參 數(shù) 會 拼 接 在 跳 轉(zhuǎn) 地 址 的 后 面 。 使 用 t h i s . router.push({path: 'testQuery',query: {testQuery:'testQuery'}})，傳遞的參數(shù)會拼接在跳轉(zhuǎn)地址的后面。使用this. router.push(path:′testQuery′,query:testQuery:′testQuery′)，傳遞的參數(shù)會拼接在跳轉(zhuǎn)地址的后面。使用this.route.params.key取值
params方式：
this. r o u t e r . p u s h ( n a m e : ′ t e s t P a r a m s ′ , p a r a m s : t e s t P a r a m s : ′ t e s t P a r a m s ′ ) ， 傳 遞 的 參 數(shù) 不 會 拼 接 在 跳 轉(zhuǎn) 的 后 面 。 使 用 t h i s . router.push({name: 'testParams',params: {testParams:'testParams'}})，傳遞的參數(shù)不會拼接在跳轉(zhuǎn)的后面。使用this. router.push(name:′testParams′,params:testParams:′testParams′)，傳遞的參數(shù)不會拼接在跳轉(zhuǎn)的后面。使用this.route.query.key取值

二、實現(xiàn)代碼

1.index.js代碼

const router = new Router({
    routes: [
        {
            path:'/test',
            component: test,
        },
        {
            name: 'testParams',
            path:'/testParams',
            component: TestParams,
        },
        {
            path:'/testQuery',
            component: TestQuery,
        }
    ]
})

2.test.vue代碼

<template>
  <div class="test">
    <button v-on:click="testParams">params</button>
    <button v-on:click="testQuery">query</button>
  </div>
</template>
<script>
export default {
  name: "test",
  data(){
    return {

    }
  },
  methods:{
    testParams(){
      this.$router.push({name: 'testParams',params: {testParams:'testParams'}});
    },
    testQuery(){
      this.$router.push({path: 'testQuery',query: {testQuery:'testQuery'}});
    }
  }
}
</script>

3.testParams代碼

<template>
  <div id="testParams">
    {{testParams}}
  </div>
</template>

<script>
export default {
  name: "TestParams",
  data() {
    return{
      testParams: ''
    }
  },mounted() {
    this.testParams = this.$route.params.testParams;
  }
}
</script>

4.testParams代碼

<template>
  <div id="testQuery">
    {{testQuery}}
  </div>
</template>

<script>
export default {
  name: "TestQuery",
  data(){
    return{
      testQuery: ''
    }
  },mounted() {
    this.testQuery = this.$route.query.testQuery;
  }
}
</script>

5.效果

以上就是關(guān)于“this.$router.push攜帶參數(shù)跳轉(zhuǎn)頁面怎么實現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。