Vue routing jump parameter passing method query or params
queryThe corresponding parameter passing ispathandquery
paramsThe corresponding parameter passing isnameandparams
queryThe parameter is displayed behind the path in the browser address bar http://localhost:5173/test?id=123
paramsThe parameter is also displayed on the browser address bar http://localhost:5173 under normal circumstances /test/100
paramsimplicit writing method (not recommended) but be careful刷新页面参数丢失问题!to see三.
自我记录
1. Static route jumps are common
The address bar displays:
http://localhost:5173/test?id=123
src/router/index.tsrouting rules
{
path: '/test',
component: () => import('@/views/Test/index.vue'),
meta: {
title: '测试路由传参query' }
}
1.1 Programmatic navigation query 对象形式Jump
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>
query1.2 Add parameters to normal push Jump
<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 queryPass parameter value 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>
2. Dynamic routing jump
(PS: Used when two different paths want to point to the same component) At this time, support needs to
/test/100/test/200
be provided in the router/index.ts file. Programmatic navigation params need to be configured when jumping in object form.path:'/test/:id'/:idname: 'test'name
src/router/index.tsrouting rules
{
path: '/test/:id', // 需要 `/:id` 的支持
name: 'test', // 编程式导航 params 对象形式时 需要配置name 如果采用 2.2跳转方式则不用配置
component: () => import('@/views/Test/index.vue'),
meta: {
title: '测试路由传参' }
}
The address bar displays:
http://localhost:5173/test/100
2.1 Programmatic Navigation params 对象形式Jump
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>
params2.2 Add parameters to normal push Jump
<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 paramsPassing parameter values 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>
3. paramsImplicit writing and solving the problem of data loss when refreshing the page
https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 This writing method is no longer recommended in the version
vue2 (vue-router@3) writing method vue3 (vue-router@4) does not support the official recommended alternative by default: piniavue-router 4.14
The v2 project is specially used for demonstration because v3 has removed this wording.
The address bar shows:http://0.0.0.0:8080/test
src/router/index.tsrouting rules
Note: There is no support
path: '/test'required like the second item later because it is not saved in the js object on the address bar, so refreshing the page will make the data disappear./:id
{
path: '/test',
name: 'test',
component: () => import('@/views/Test/index.vue'),
meta: {
title: '测试路由传参废弃的params写法' }
}
3.1 Programmatic navigation params 对象形式Jump ps: refresh page data loss
<script>
export default {
methods:{
toTest(){
this.$router.push(
{
name:'test',
params:{
id : 300 }
}
)
}
}
</script>
3.2 The method of obtaining data is the same as that of dynamic routing
<template>
<div class="test-page">我是接收到的参数: {
{
$route.params.id }}</div>
</template>
<script>
export default {
mounted() {
console.log(this.$route.params, 'params')
}
}
</script>
3.3 Solve the problem of data refresh page loss
1. The principle is to use vuex for data communication. When you get the data, store a copy locally. When you refresh the page, you find that the vuex value is gone and you can restore it from the local LocalStorage / sesstionStorage. 2. Use the History API to transmit and receive
https . ://developer.mozilla.org/zh-CN/docs/Web/API/History
It is recommended to use pinia after 3.v3. The specific usage of pinia is put here. Vue3+Pinia+data persistence takes 20 minutes to get started quickly.
3.3.2 History Api state simple example
路由规则
{
path: '/test',
name: 'test',
component: () => import('@/views/Test/index.vue'),
meta: {
title: '测试路由传参history写法' }
}
src/About/index.vue
Both path and name can be used, but the name needs to be configured with the corresponding name in the route.
<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>
