最新vue路由跳转传参方式query or params

query 传参 对应的是 path 和 query
params 传参 对应的是 name 和 params
query 参数显示在浏览器地址栏的path后面 http://localhost:5173/test?id=123
params 参数正常情况下也是显示在浏览器地址栏上 http://localhost:5173/test/100
params 隐式写法(不推荐) 但是要注意刷新页面参数丢失问题! 看 三.

自我记录

一.静态路由跳转 比较常见

地址栏显示: http://localhost:5173/test?id=123

src/router/index.ts 路由规则

  {
    path: '/test',
    component: () => import('@/views/Test/index.vue'),
    meta: { title: '测试路由传参query' }
  }

1.1 编程式导航 query 对象形式 跳转

src/About/index.vue

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const toTest = () => {
  // 一.静态路由跳转
  // 1.1编程式导航 query 对象形式
  router.push({
    path: '/test',
    query: { id: 123 }
  })
}
// 取参数 route.query.id
</script>

1.2 正常push里面加参数 query 跳转

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const toTest = () => {
  // 一.静态路由跳转
  // 1.2正常push里面加参数 query
  router.push(`/test?id=${1234}`)
}
// 取参数 route.query.id
</script>

1.3 query 传参 取值 route.query.id

src/test/index.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const test = ref()
test.value = route.query.id
</script>

<template>
  <div class="test-page">我是接收到的参数: {{ test }}</div>
</template>

<style lang="scss" scoped></style>

二.动态路由跳转

(PS:两个不同的路径想指向同一个组件时使用) /test/100 /test/200
此时需要在 router/index.ts文件 进行支持 path:'/test/:id' 需要 /:id 的支持
编程式导航 params 对象形式跳转时 name: 'test' 需要配置name

src/router/index.ts 路由规则

  {
    path: '/test/:id', // 需要 `/:id` 的支持
    name: 'test', // 编程式导航 params 对象形式时 需要配置name 如果采用 2.2跳转方式则不用配置
    component: () => import('@/views/Test/index.vue'),
    meta: { title: '测试路由传参' }
  }

地址栏显示: http://localhost:5173/test/100

2.1 编程式导航 params 对象形式 跳转

src/About/index.vue

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const toTest = () => {
  // 一.静态路由跳转
  // 2.1编程式导航 params 对象形式
  router.push({
    name: 'test',
    params: { id: 100 }
  })
}
// 取参数 route.params  ===  { "id": "100" }
</script>

2.2 正常push里面加参数 params 跳转

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const toTest = () => {
  // 一.静态路由跳转
  // 2.2 正常push里面加参数 params
  router.push(`/test/${200}`)
}
// 取值 route.params ===  { "id": "200" }
</script>

2.3 params 传参 取值 route.params

src/test/index.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const test = ref()
// route.params ===  { "id": "200" } 所以 需要.id
test.value = route.params.id
</script>
<template>
  <div class="test-page">我是接收到的参数: {{ test }}</div>
</template>
<style lang="scss" scoped></style>

三.params 隐式写法 以及解决刷新页面数据丢失问题

https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
在 vue-router 4.14版本中 已经不推荐此写法了
vue2(vue-router@3) 写法
vue3(vue-router@4) 默认不支持 官方推荐替代方案为: pinia

特意用的v2的项目进行演示的 因为v3已经移除这种写法了
地址栏显示: http://0.0.0.0:8080/test

src/router/index.ts 路由规则

注意:path: '/test' 后面没有像 第二项 一样 需要 /:id 的支持
因为没有存到地址栏上 存在js对象上了 所以刷新页面就是使数据消失了

  {
    path: '/test',
    name: 'test',
    component: () => import('@/views/Test/index.vue'),
    meta: { title: '测试路由传参废弃的params写法' }
  }

3.1 编程式导航 params 对象形式 跳转 ps:刷新页面数据丢失

<script>
export default {
    methods:{
      toTest(){
        this.$router.push(
          {
            name:'test',
            params:{ id : 300 }
          }
        )
      }
    }
</script>

3.2 取数据与动态路由取法一样

<template>
  <div class="test-page">我是接收到的参数: {{ $route.params.id }}</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.params, 'params')
  }
}
</script>

3.3 解决数据刷新页面丢失

1.原理就是利用vuex进行数据通信,拿到数据的时候同时存储一份到本地,刷新页面的时候发现vuex的值没了 可以从本地LocalStorage / sesstionStorage 恢复过来
2.使用 History API 方式传递和接收 https://developer.mozilla.org/zh-CN/docs/Web/API/History
3.v3以后推荐用pinia 具体pinia的用法放到这 Vue3+Pinia+数据持久化 20分钟快速上手

3.3.2 History Api state简单示例

路由规则

    {
      path: '/test',
      name: 'test',
      component: () => import('@/views/Test/index.vue'),
      meta: { title: '测试路由传参history写法' }
    }

src/About/index.vue

用 path 和 name 都可以 但是 name 要在路由里面配置对应的name

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const toTest = () => {
  // 使用 history api state
  const params = { id: 600 }
//  router.push({
//    path: 'test',
//    state: { id: 600 }
//  })
  router.push({
    name: 'test', // 路由规则要配置name
    state: params
  })
}
// 取参数 history.state  ===  
//{
//    "back": "/about",
//    "current": "/test",
//    "forward": null,
//    "replaced": false,
//    "position": 9,
//    "scroll": null,
//    "id": 600
}
</script>

src/test/index.vue

<script setup lang="ts">
import { ref } from 'vue'
const test = ref()
test.value = history.state.id
console.log(history.state)
</script>
<template>
  <div class="test-page">我是接收到的参数: {{ test }}</div>
</template>