亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

//路由中配置了如下對象：
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ù)會在url中以?id=xxx&name=xxx的形式存在。刷新不丟失。

傳遞時，分為以下幾種形式。我們往 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傳參 （對象寫法下只能使用路由中的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往動態(tài)路由中傳遞，刷新參數(shù)不丟失</router-link>
      <button @click="paramsBtn1">params往動態(tài)路由中傳遞,刷新參數(shù)不丟失</button>
      <!--注意：對象的形式中只能路由中的name跳轉(zhuǎn)，往普通路由跳轉(zhuǎn)，刷新后參數(shù)會丟失（對象形式下，params參數(shù)不在url中）-->
      <router-link :to="{name:'query1',params:{id:dataId,name:dataName} }">params往普通路由傳遞，刷新后會丟失</router-link>
      <button @click="paramsBtn2">params往普通路由傳遞，刷新后會丟失</button>
  </div>
</template>
<script>
export default {
  name: "home",
  data(){
    return {
      dataId:222,
      dataName:'張三'
    }
  },
  methods:{
    paramsBtn1(){
      //注意：params往動態(tài)路由中傳遞，刷新參數(shù)不丟失
      this.$router.push({
        name:'params1',
        params:{id:'22',name:this.dataName}
      })
    },
    paramsBtn2(){
      //注意：這里傳遞后，刷新后會丟失（對象形式下，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)傳參時，刷新跳轉(zhuǎn)后傳參的頁面，數(shù)據(jù)還會顯示存在（項目中遇到此問題）

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)傳參時，刷新跳轉(zhuǎn)后傳參的頁面，數(shù)據(jù)不存在（(url中沒帶參數(shù))）

總結(jié)

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

相關文章

最新評論