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' }
}
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>
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>
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
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>
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>
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写法' }
}
params 对象形式
跳转 ps:刷新页面数据丢失<script>
export default {
methods:{
toTest(){
this.$router.push(
{
name:'test',
params:{ id : 300 }
}
)
}
}
</script>
<template>
<div class="test-page">我是接收到的参数: {{ $route.params.id }}</div>
</template>
<script>
export default {
mounted() {
console.log(this.$route.params, 'params')
}
}
</script>
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分钟快速上手
路由规则
{
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>