this.$router.push跳转页面携带参数

发布时间:2023-11-30 13:00

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

this.$router.push进行页面跳转时。携带参数有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 ′ ) , 传 递 的 参 数 会 拼 接 在 跳 转 地 址 的 后 面 。 使 用 t h i s . router.push({path: 'testQuery',query: {testQuery:'testQuery'}}),传递的参数会拼接在跳转地址的后面。使用this. router.push(path:testQuery,query:testQuery:testQuery)使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 ′ ) , 传 递 的 参 数 不 会 拼 接 在 跳 转 的 后 面 。 使 用 t h i s . router.push({name: 'testParams',params: {testParams:'testParams'}}),传递的参数不会拼接在跳转的后面。使用this. router.push(name:testParams,params:testParams:testParams)使this.route.query.key取值

二、实现代码

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.效果

\"在这里插入图片描述\"
\"在这里插入图片描述\"
\"在这里插入图片描述\"

总结

两种方式非常相似,区别在于两点:
1、是否在地址后面拼接参数。
2、因为动态路由也是传递params的,所以在 this.$router.push() 方法中 path是不能和params一起使用的,否则params将无效。需要用name来指定页面,一定要记得,在index.js中设置好那么属性。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号