vue路由传参的基本实现方式小结【三种方式】

下面是详细的“vue路由传参的基本实现方式小结【三种方式】”攻略：

一、query方式

1. 在router-link中添加to属性，例如：

<router-link :to="{path: 'detail', query: {id: 1, name: 'foo'}}"> 去往详情 </router-link>

这里在to属性中传递了一个对象，path表示跳转到的目标路由，query表示需要传递的参数。

1. 在目标组件中，通过this.$route.query获取参数，例如：

<script>
export default {
  name: 'Detail',
  data () {
    return {
      id: null,
      name: null
    }
  },
  methods: {},
  created () {
    this.id = this.$route.query.id
    this.name = this.$route.query.name
  }
}
</script>

二、dynamic路由方式

1. 在router中定义动态路由

{
  path: '/detail/:id/:name',
  name: 'Detail',
  component: Detail
}

动态路由以":"开头，表示该部分为可变参数。

1. 在router-link中添加to属性，传递参数，例如：

<router-link :to="'/detail/' + id + '/' + name"> 去往详情 </router-link>

1. 在目标组件中，通过this.$route.params获取参数，例如：

<script>
export default {
  name: 'Detail',
  data () {
    return {
      id: null,
      name: null
    }
  },
  methods: {},
  created () {
    this.id = this.$route.params.id
    this.name = this.$route.params.name
  }
}
</script>

三、state方式

1. 在router-link中添加to属性，并在query中传递参数，例如：

<router-link :to="{path: '/detail', query: {id: 1, name: 'foo'}}" @click.native="goDetail"> 去往详情 </router-link>

1. 在goDetail方法中，调用this.$router.push()跳转路由，并传递state参数，例如：

<script>
export default {
  name: 'Home',
  data () {
    return {}
  },
  methods: {
    goDetail () {
      this.$router.push({
        path: '/detail',
        query: {id: 1, name: 'foo'},
        state: {foo: 'bar'}
      })
    }
  }
}
</script>

1. 在目标组件中，通过this.$route.params获取参数，例如：

<script>
export default {
  name: 'Detail',
  data () {
    return {
      id: null,
      name: null,
      foo: null
    }
  },
  methods: {},
  created () {
    this.id = this.$route.query.id
    this.name = this.$route.query.name
    this.foo = this.$route.params.foo
  }
}
</script>

以上就是“vue路由传参的基本实现方式小结【三种方式】” 的完整攻略，希望对你有所帮助。