1. La elección entre los dos
Nota: Cuando el parámetro que se va a pasar se obtiene a través del formulario en la página de vinculación de v-model, se debe usar la navegación de ruta programática; de lo contrario, ¡el parámetro estará vacío!
configuración:
const planInfo = {
fromCity: "", //都是v-model绑定了页面的
backCity: "",
goDate: "",
};
Método de paso de error:
<router-link
:to="{
name: 'TrvalPlan',
params: {
fromCity: planInfo.fromCity,
backCity: planInfo.backCity,
goDate: planInfo.goDate,
},
}"
target="_blank"
class="thm-btn tour-search-one__btn"
>
制定行程
</router-link>
La forma correcta de pasar parámetros:
<button
@click="createPlan"
class="thm-btn tour-search-one__btn"
>
制定行程
</button>
const createPlan = () => {
router.push({
name: "TrvalPlan",
params: {
fromCity: planInfo.fromCity,
backCity: planInfo.backCity,
goDate: planInfo.goDate,
},
});
};
Nota: Cuando use params para pasar parámetros, debe usar la navegación con nombre, es decir, use el nombre
En segundo lugar, el método de uso de parámetros.
1. Usar ruta para recibir y usar parámetros
Nota: useRoute es completamente diferente de useRouter en el enrutador, useRoute se usa para aceptar parámetros
En la página que acepta parámetros nueva ruta, luego use params
//setup内：
const route = useRoute();
console.log(route.params.fromCity);
console.log(route.params);
2. Use accesorios para recibir y usar parámetros
2.1 Escritura 1
En el archivo de parámetros:
const planInfo = {
fromCity: "",
backCity: "",
goDate: "",
};
const createPlan = () => {
router.push({
name: "TrvalPlan",
params: planInfo,
});
};
En el archivo de configuración del enrutador:
props: true,
En la página que acepta parámetros:
props: ["fromCity", "backCity", "goDate"],
// 简单功能的实现
setup(props, context) {
console.log(props);
}
resultado:
2.2 Escritura 2
En el archivo de parámetros:
const planInfo = {
fromCity: "",
backCity: "",
goDate: "",
};
const createPlan = () => {
router.push({
name: "TrvalPlan",
params: planInfo,
});
};
En el archivo de configuración del enrutador:
props(route) {
console.log("-------");
console.warn(route);
console.log("-------");
return {
fromCity: route.params.fromCity,
backCity: route.params.backCity,
goDate: route.params.goDate,
};
},
En la página que acepta parámetros:
props: ["fromCity", "backCity", "goDate"],
// 简单功能的实现
setup(props, context) {
console.log(props);
}
resultado:
2.3 Escritura 3
En el archivo de parámetros:
const planInfo = {
fromCity: "",
backCity: "",
goDate: "",
};
const createPlan = () => {
router.push({
name: "TrvalPlan",
params: planInfo,
});
};
En el archivo de configuración del enrutador:
props({
params: {
fromCity, backCity, goDate } }) {
return {
fromCity,
backCity,
goDate,
};
},
En la página que acepta parámetros:
props: ["fromCity", "backCity", "goDate"],
// 简单功能的实现
setup(props, context) {
console.log(props);
}
resultado:
Uso: ¡Solo usa estos tres artículos directamente!