首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue路由传参 router-link和编程式传参

vue路由传参 router-link和编程式传参方式

2023-05-25 09:00:06 作者：这个网名好记

这篇文章主要介绍了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传递参数

query传参更像是原生中的get方式传参，参数会在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>

接收参数：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往动态路由中传递，刷新参数不丢失</router-link>
      <button @click="paramsBtn1">params往动态路由中传递,刷新参数不丢失</button>
      <!--注意：对象的形式中只能路由中的name跳转，往普通路由跳转，刷新后参数会丢失（对象形式下，params参数不在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往动态路由中传递，刷新参数不丢失
      this.$router.push({
        name:'params1',
        params:{id:'22',name:this.dataName}
      })
    },
    paramsBtn2(){
      //注意：这里传递后，刷新后会丢失（对象形式下，params参数不在url中）
      this.$router.push({
        name:'query1',
        params:{id:'22',name:this.dataName}
      })
    }
  }
}
</script>
<style scoped>
</style>

接收参数：this.$route.params

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

this.$route.query的使用

(1)、传参数：

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

(2)、获取参数：

this.$route.query.productId

(3)、在url中形式（url中带参数）

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

(4)、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在（项目中遇到此问题）

this.$route.params的使用

（1）、传参数：

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

（2）、获取参数：

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

（3）、在url中形式（url中不带参数）

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

（4）、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在（(url中没带参数)）

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。