欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

Vue 3里的query与params参数在路由传递中的应用与操作指南

最编程 2024-08-01 19:40:28
...

概述

路由传参有query和params两种方式。

query以?形式传参，如 / user ? id=1 & name=tom & gender=male

params通过:形式绑定参数传参，如 / user / :id / :name / :gender --> / user / 1 / tom / male

总结：路由传参用query或param都可以。一般采用params方式进行路由传参，其url比较美观。

1.定义路由

<!--routers/router.ts-->
    {
      path: '/test',       //测试路由
      name: 'test',
      component: () => import('~/views/test/index.vue'),
      meta: {
        title: '测试路由'
      }
    },
    {
      path: '/user',      //query定义路由
      name: 'user',
      component: () => import('~/views/user/index.vue'),
      meta: {
        title: 'user页面'
      }
    },
    
    // {
    //   path: '/user/:id/:name/:age/:gender',     //params定义路由(特殊，注意！！)
    //   name: 'user',
    //   component: () => import('~/views/pgc/user/index.vue'),
    //   meta: {
    //     title: 'user页面'
    //   }
    // }

2.路由跳转

<!--views/test/index.vue-->
<template>
  <div>Test页面</div>
  <router-link to="/user?id=12&name=tom&age=13&gender=male">
    query传参
  </router-link>
  <router-link to="/user/12/tom/13/male">
    params传参
  </router-link>
</template>

3.接收参数

<!--views/user/index.vue-->
<template>
  <div>user页面接收参数</div>
  <div>
    <!-- 获得到query传参的参数 { "id": "12", "name": "tom", "age": "13", "gender": "male" } -->
    {{ query }}
  </div>
  <div>
    <!-- 获得到params传参的参数 { "id": "12", "name": "tom", "age": "13", "gender": "male" } -->
    {{ params }}
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
const { query, params } = useRoute();   //2.在跳转页面定义router变量，解构得到指定的query和params传参的参数
</script>

上一篇： 10: vue-router和单文件组件

下一篇： 如何运用浏览器history模式与Umi中的history功能

推荐阅读