vue_cli路由传参个人总结--完整代码

Posted 2021-05-18 码妈

vue_cli路由传参

• 带参数的跳转--使用path匹配路由再通过params接收参数
• 带参数的跳转--使用path匹配路由再通过query传递参数
• 不带参数的跳转--使用name匹配路由再通过params来传递参数

带参数的跳转–使用path匹配路由再通过params接收参数

• 带参数的跳转–通过path传递
• 需要在path中添加/:xxx来对应 $router.push 中path携带的参数
  在路由index.js文件中配置要跳转的路由

{
  path: '/parent',
  name: 'Parent',
  component: Parent
},
{
  path: '/childrenA/:uname',
  name: 'ChildrenA',
  component: ChildrenA
},

在父组件中，调用$router.push 实现携带参数的跳转

<template>
  <div class="parent">
    <div>要传参的数据是{{uname}}</div>
    <div @click="pushUname">点我跳转到 childrenA界面 并且传参</div>
  </div>
</template>
<script>
export default {
  name: 'Parent',
  data () {
    return {
      uname: 'Chen'
    }
  },
  methods: {
    pushUname () {
      this.$router.push({ // 调用$router.push 实现携带参数的跳转
        path: `childrenA/${this.uname}`
      })
    }
  }
}
</script>

*在子组件中，使用this.$route.params.uname来接收传递的参数 *

• 接收参数的时候是$route.params而不是$router。

<template>
  <div class="childrenA">
    <div>ChildrenA界面: 接收到路由传参的数据是{{uname}}</div>
  </div>
</template>
<script>
export default {
  name: 'ChildrenA',
  data () {
    return {
      uname: ''
    }
  },
  methods: {
    getUname () {
      this.uname = this.$route.params.uname
    }
  },
  created () {
    this.getUname()
  }
}
</script>

结果

父组件	点击跳转后

带参数的跳转–使用path匹配路由再通过query传递参数

• url后面会有?uname=？
  在路由index.js文件中配置要跳转的路由

{
  path: '/parent',
  name: 'Parent',
  component: Parent
},
{
  path: '/childrenA',
  name: 'ChildrenA',
  component: ChildrenA
}

在父组件中

<template>
  <div class="parent">
    <div>要传递的数据是{{uname}}{{age}}</div>
    <div @click="pushUname">点我跳转到 childrenA界面 并且传数据</div>
  </div>
</template>
<script>
export default {
  name: 'Parent',
  data () {
    return {
      uname: 'Chen',
      age: '18'
    }
  },
  methods: {
    pushUname () {
      this.$router.push({
        path: '/childrenA', // 不注重大小写，但是这个path的值建议和路由中的path的值一致
        query: {
          uname: this.uname,
          age: this.age
        }
      })
    }
  }
}
</script>

*在子组件中 *

<template>
  <div class="childrenA">
    <div>ChildrenA界面: 接收到路由传递的数据是{{uname}}{{age}}</div>
  </div>
</template>
<script>
export default {
  name: 'ChildrenA',
  data () {
    return {
      uname: '',
      age: ''
    }
  },
  methods: {
    getUname () {
      this.uname = this.$route.query.uname
      this.age = this.$route.query.age
    }
  },
  created () {
    this.getUname()
  }
}
</script>

结果

父组件	点击跳转后

不带参数的跳转–使用name匹配路由再通过params来传递参数

在路由index.js文件中配置要跳转的路由

{
  path: '/parent',
  name: 'Parent',
  component: Parent
},
{
  // path: '/childrenA/:uname/:age', // 如果传参 那么url就会显示传递的参数
  path: '/childrenA', // 如果不传参 url就不显示传递的参数
  name: 'ChildrenA', // 这个name的值必须和$router.push中的name的值一致
  component: ChildrenA
}

在父组件中，通过路由属性中的name来确定匹配的路由，通过params来传递参数

<template>
  <div class="parent">
    <div>要传递的数据是{{uname}}{{age}}</div>
    <div @click="pushUname">点我跳转到 childrenA界面 并且传数据</div>
  </div>
</template>
<script>
export default {
  name: 'Parent',
  data () {
    return {
      uname: 'Chen',
      age: '18'
    }
  },
  methods: {
    pushUname () {
      this.$router.push({
        name: 'ChildrenA', // 这个name的值必须和路由中的name的值一致
        params: {
          uname: this.uname,
          age: this.age
        }
      })
    }
  }
}
</script>

子组件中

<template>
  <div class="childrenA">
    <div>ChildrenA界面: 接收到路由传递的数据是{{uname}}{{age}}</div>
  </div>
</template>
<script>
export default {
  name: 'ChildrenA',
  data () {
    return {
      uname: '',
      age: ''
    }
  },
  methods: {
    getUname () {
      this.uname = this.$route.params.uname
      this.age = this.$route.params.age
    }
  },
  created () {
    this.getUname()
  }
}
</script>

父组件	点击跳转后