vue传参和接受参数方法

1、接收参数使用route,route包含路由信息，接收参数有两种方式,params和query

path跳转只能使用query传参,name跳转都可以

params：获取来自动态路由的参数

query：获取来自search部分的参数

写法

1. path跳,query传

传

import { useRouter } from 'vue-router'

export default {

  setup() {

    const router = useRouter();

    router.push({

      path: '/home',

      query: {

        id: 1

      }

    });

  }

}

接

import { useRoute } from 'vue-router'

export default {

  setup() {

    const route = useRoute();

    console.log(route.query.id);

  }

}

1. name跳,query传

传

import { useRouter } from 'vue-router'

export default {

  setup() {

    const router = useRouter();

    router.push({

      name: 'home',

      query: {

        id: 1

      }

    });

  }

}

接

import { useRoute } from 'vue-router'

export default {

  setup() {

    const route = useRoute();

    console.log(route.query.id);

  }

}

1. name跳,params传（路由处必须配置动态路由）

传

import { useRouter } from 'vue-router'

export default {

  setup() {

    const router = useRouter();

    router.push({

      name: 'home',

      params: {

        id: 1

      }

    });

  }

}

接

import { useRoute } from 'vue-router'

export default {

  setup() {

    const route = useRoute();

    console.log(route.params.id);

  }

}