El salto de ruta de Vue3.0 lleva parámetros

1. Salto de ruta

1. En la página que hay que saltar.

//引入API---useRouter
import { useRouter } from 'vue-router'
......
//定义router变量
const router =useRouter()
const methodClick=(data)=>{
let paramValue=data.deviceCode
//路由跳转，携带参数
router.push('/equipment/operation?deviceCode='+paramValue)

用router.push跳转页面：
例：
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

2. Si hay parámetros, introduzca API-useRoute en la página de recepción.

import { useRoute } from 'vue-router'
......
//在接收页面定义变量route，获取传过来的变量
const route = useRouter()
onMounted(() => {
	if (route.currentRoute.value.query.deviceCode) {
		state.codeDevice2 = route.currentRoute.value.query.deviceCode
	}
})

例：
//首先在setup中定义
const route = useRoute()
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;

2. Problemas a los que se debe prestar atención al pasar parámetros en la página

1. Si se proporciona la ruta, se ignorarán los parámetros, pero este no es el caso de la consulta. En este momento, debe proporcionar el nombre de la ruta o escribir a mano la ruta completa con los parámetros.

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

2. Las reglas anteriores también se aplican al atributo to del componente de enlace del enrutador
3. Si el destino es el mismo que la ruta actual, solo los parámetros han cambiado (por ejemplo, de un perfil de usuario a otro /usuarios/1 - > /users/2), debe usar beforeRouteUpdate para responder a este cambio (como obtener información del usuario)