Directorio de artículos
valor de pase de página
El paso del valor de la página es generalmente para agregar parámetros después de la ruta de la página cuando la página salta, y luego leer la información transportada en la ruta después de que se representa la página de destino.
La descripción del código para saltar de la página 1 a la página 2 es la siguiente
Página 1: Enrutamiento página1
goPage2(row) {
this.$router.push({
name: 'page2',//跳转到第二个页面
query: {
//路由后面携带的信息
id: row.id,
type: 1
}
})
}
Página 2: Enrutamiento página 2
Defina el atributo de datos e inicialice el valor del atributo después de cargar el elemento de la página
<template>
<div>
<span v-if="type === 1">这是数字一</span>
<span v-else>{
{
typeof(type)}}</span>
</div>
</template>
<script>
export default {
components: {
},
data: function() {
return {
id: '',
type: ''
}
},
mounted() {
this.id = this.$route.query.id
this.type = this.$route.query.type
},
methods: {
}
}
Preste atención al tipo de datos al pasar el valor
Al pasar valores, debemos prestar atención al tipo de datos pasados.
Por ejemplo, el tipo de valor pasado en el ejemplo anterior, pasamos un número 1 de la página 1 a la página 2, la página 2 se muestra de la siguiente manera: parece normal y el valor se pasa correctamente, pero si actualizamos la página, la página 2 se muestra de la siguiente manera, lo que indica que el tipo ya no es el número
1
.
La razón es que después de actualizar la página, el navegador convertirá todos los números de la dirección de enrutamiento en cadenas, que no deben coincidir con el número 1.
Por lo tanto, al pasar valores en la página, para algunos valores que deben usarse para la comparación de datos, para evitar cambiar el tipo de datos, puede usar uniformemente el tipo de cadena para transferir.
Es decir, al pasar un valor en la página, especifique el tipo de datos.
goPage2(row) {
this.$router.push({
name: 'page2',//跳转到第二个页面
query: {
//路由后面携带的信息
id: row.id,
type: String(1) //指定为字符串 页面刷新后不影响数据类型
}
})
}
Valor de paso del componente
Primero defina un componente
<template>
<div>
<pre>姓名：{
{
name}}；年龄：{
{
age}}</pre>
</div>
</template>
<script>
export default {
props: {
name: {
//接收属性
type: String,
default: () => ''
},
age: {
//接收属性
type: Number,
default: () => ''
}
},
data: function() {
return {
}
}
}
</script>
Luego utilícelo en el componente principal y pase el valor al componente secundario:
<template>
<Page2 :name="'阿龙'" age="18" /> //传递属性
</template>
<script>
import Page2 from './Page2.vue'
export default {
components: {
Page2
},
data: function() {
return {
}
}
}
</script>
El contenido de la visualización de la página es el siguiente
, cabe señalar que en las propiedades del componente, cuando se utilizan dos puntos, las propiedades se reciben posteriormente. Se aceptan valores sin dos puntos.
- :name="'Aaron'" ▶ Nombre: Aaron; //Indica pasar un atributo, el valor del atributo es la cadena Aaron
- :name="Aaron" ▶ Nombre:;//El atributo Aaron no está definido en la página, por lo que el nombre se muestra directamente en blanco
- name="'Along'" ▶ nombre: 'Along';//indica transferencia directa de la cadena 'Along' (entre comillas simples)