vue-router 路由4种传参方式

最新推荐文章于 2024-04-15 11:12:07 发布

itwlz

最新推荐文章于 2024-04-15 11:12:07 发布

阅读量481

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45610943/article/details/129495175

版权

文章详细介绍了在Vue.js中如何通过`router-link`、`$router.push`进行路由导航，并分别展示了通过params、query方式传递参数的方法，以及name匹配路由和参数在地址栏的显示情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.router-link路由导航

//1父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link>
例如：<router-link to="/a/123">routerlink传参</router-link>
//2子组件: this.$route.params.num接收父组件传递过来的参数
//3路由配置:：{path: '/a/:num', name: A, component: A}

2.调用$router.push实现路由传参

//1父组件: 绑定点击事件，编写跳转代码
<button @click="deliverParams(123)">push传参</button>
  methods: {
    deliverParams (id) {
      this.$router.push({
        path: `/d/${id}` //注意看第3点
      })
    }
  }
//2子组件: this.$route.params.id接收父组件传递过来的参数
mounted () {
  this.id = this.$route.params.id
}
//3路由配置:：{path: '/d/:id', name: D, component: D}

3.name匹配路由(参数不会暴露在地址栏)

//1父组件: 匹配路由配置好的属性名
<button @click="deliverByName()">params传参</button>
    deliverByName () {
      this.$router.push({
        name: 'B',
        params: {
          sometext: '一只羊出没'
        }
      })
    }
//2子组件: this.$route.params.id接收父组件传递过来的参数
mounted () {
  this.id = this.$route.params.id
}
//3路由配置: {path: '/b', name: 'B', component: B}

4.query传递参数(参数会暴露在地址栏)

//1父组件: 匹配路由配置好的属性名
<button @click="deliverQuery()">query传参</button>
    deliverQuery () {
      this.$router.push({
        path: '/c',
        query: {
          sometext: '这是小羊同学'
        }
      })
    }
//2子组件: this.$route.query.id接收父组件传递过来的参数
mounted () {
  this.id = this.$route.query.id
}
//3路由配置: {path: '/b', name: 'B', component: B}