欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue路由傳參 router-link和編程式傳參方式

 更新時(shí)間：2023年05月25日 09:00:05   作者：這個(gè)網(wǎng)名好記  
這篇文章主要介紹了vue路由傳參 router-link和編程式傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue路由傳參 router-link和編程式傳參

//路由中配置了如下對(duì)象：
let options= {
    routes:[
        {
            path:'/insertquery',
            name:'query1',
            component:()=>import('@/pages/insertquery')
        },
        {
            path:'/insertparams1/:id/:name',
            name:'params1',
            component:()=>import('@/pages/insertparams1')
        },
        {
            path:'/',
            component:()=>import('@/pages/home')
        }
    ]
}

vue中query傳遞參數(shù)

query傳參更像是原生中的get方式傳參，參數(shù)會(huì)在url中以?id=xxx&name=xxx的形式存在。刷新不丟失。

傳遞時(shí)，分為以下幾種形式。我們往 path:'/insertquery’中組件中傳參：

<template>
  <div style="display: flex;flex-direction:column">
    <router-link :to=" '/insertquery?id='+dataId+'&name='+dataName">query傳參</router-link>
    <router-link :to="`/insertquery?id=${dataId}&name=${dataName}`">query傳參</router-link>
    <!--可以使用路由中的name和path中的任意一種-->
    <router-link :to="{path:'/insertquery',query:{id:dataId,name:dataName} }">query傳參</router-link>
    <router-link :to="{name:'query1',query:{id:dataId,name:dataName} }">query傳參</router-link>
      <button @click="queryBtn1">query傳參</button>
      <button @click="queryBtn2">query傳參</button>
  </div>
</template>
<script>
export default {
  name: "home",
  data(){
    return {
      dataId:222,
      dataName:'張三'
    }
  },
  methods:{
    queryBtn1(){
      this.$router.push({
        name:'query1',
        query:{id:'22',name:this.dataName}
      })
    },
    queryBtn2(){
      this.$router.push({
        path:'/insertquery',
        query:{id:this.dataId,name:this.dataName}
      })
    }
  }
}
</script>
<style scoped>
</style>

接收參數(shù) ：this.$route.query.變量名

再說params傳參 （對(duì)象寫法下只能使用路由中的name）

<template>
  <div style="display: flex;flex-direction:column">
    <router-link :to=" '/insertparams1/'+dataId+'/'+dataName">params傳參</router-link>
    <router-link :to="`/insertparams1/${dataId}/${dataName}`">params傳參</router-link>
    <router-link :to="{name:'params1',params:{id:dataId,name:dataName} }">params往動(dòng)態(tài)路由中傳遞，刷新參數(shù)不丟失</router-link>
      <button @click="paramsBtn1">params往動(dòng)態(tài)路由中傳遞,刷新參數(shù)不丟失</button>
      <!--注意：對(duì)象的形式中只能路由中的name跳轉(zhuǎn)，往普通路由跳轉(zhuǎn)，刷新后參數(shù)會(huì)丟失（對(duì)象形式下，params參數(shù)不在url中）-->
      <router-link :to="{name:'query1',params:{id:dataId,name:dataName} }">params往普通路由傳遞，刷新后會(huì)丟失</router-link>
      <button @click="paramsBtn2">params往普通路由傳遞，刷新后會(huì)丟失</button>
  </div>
</template>
<script>
export default {
  name: "home",
  data(){
    return {
      dataId:222,
      dataName:'張三'
    }
  },
  methods:{
    paramsBtn1(){
      //注意：params往動(dòng)態(tài)路由中傳遞，刷新參數(shù)不丟失
      this.$router.push({
        name:'params1',
        params:{id:'22',name:this.dataName}
      })
    },
    paramsBtn2(){
      //注意：這里傳遞后，刷新后會(huì)丟失（對(duì)象形式下，params參數(shù)不在url中）
      this.$router.push({
        name:'query1',
        params:{id:'22',name:this.dataName}
      })
    }
  }
}
</script>
<style scoped>
</style>

接收參數(shù)：this.$route.params

this.$route.query和this.$route.params的正確使用

this.$route.query的使用

(1)、傳參數(shù)：

this.$router.push({
? ? ? ? ?path: '/checkout',
? ? ? ? ?query:{
? ? ? ? ? ? ? ?productId:id,
? ? ? ? ? }
}）

(2)、獲取參數(shù)：

this.$route.query.productId

(3)、在url中形式（url中帶參數(shù)）

http://xxx/#/goodsDetails?productId=150642571432849

(4)、頁面之間用路由跳轉(zhuǎn)傳參時(shí)，刷新跳轉(zhuǎn)后傳參的頁面，數(shù)據(jù)還會(huì)顯示存在（項(xiàng)目中遇到此問題）

this.$route.params的使用

（1）、傳參數(shù)：

// An highlighted block
this.$router.push({
? ? ? ? ?name: 'checkout',
? ? ? ? ?params:{
? ? ? ? ? ? ? ?productId:id,
? ? ? ? ? }
}）;

（2）、獲取參數(shù)：

// An highlighted block
this.$route.params.productId

（3）、在url中形式（url中不帶參數(shù)）

// An highlighted block
http://172.19.186.224:8080/#/checkout

（4）、頁面之間用路由跳轉(zhuǎn)傳參時(shí)，刷新跳轉(zhuǎn)后傳參的頁面，數(shù)據(jù)不存在（(url中沒帶參數(shù))）

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論