vue路由传参的三种方式

query传参

    const add = () => {
      // query传参通过path、name都可以
      router.push({ path: '/smon', query: { id: 10 } })
    }

query接收参数:

    // 先引入userRoute
    import { useRoute } from 'vue-router'
    // 路由实例化
    const route = useRoute()
    console.log(route.query.id);

params传参：

    const opp = () => {
      //params只能通过name进行传参
      router.push({ name: 'Acc', params: { id: 1 } })
    }

params接收参数：

    // 先引入userRoute
    import { useRoute } from 'vue-router'
    // 路由实例化
    const route = useRoute()
    console.log(route.params.id);

动态路由传参：

    const app = () => {
      // 动态路由传参通过path用模板字符
      router.push({ path: `/acc/${10}` })
    }

动态路由接受参数：

  // 动态路由接收参数需要在路由里配置占位符
  {
    path: '/acc/:id',
    name: 'Acc',
    component: () => import('../views/Acc.vue')
  },