Marco VUE: resumen de detalles completos de vue2 a vue3 (3) paso de parámetros de componentes de enrutamiento

 

Hola a todos, soy el blogger de csdn: lqj_ mismo

Esta es la página de inicio de mi blog personal :

lqj_I_Python visión de inteligencia artificial (opencv) desde la entrada hasta el combate real, front-end, subprograma WeChat - CSDN Blog

La última columna de diseño de graduación uniapp también se coloca a continuación:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

Por lo general, también explicaré algunas cosas que sueles usar en el video de Bilibili,

Bienvenido a Bilibili:

Espacio personal de Lu Miaoer-Página personal de Lu Miaoer-哔哩哔哩Video

Tabla de contenido

Parámetros de paso del componente de enrutamiento

modo booleano

vista nombrada

modo de objeto

---

Parámetros de paso del componente de enrutamiento

Cuando obtenemos parámetros de enrutamiento, generalmente se usa en la plantilla $route, y el método se llama en la lógica useRoute(), como:

<template>
  <div>User {
   
   { $route.params.id }}</div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>

Los métodos anteriores son engorrosos y están estrechamente relacionados con el enrutamiento, lo que no conduce a la encapsulación de componentes. propsPodemos deshabilitar este comportamiento configurando al crear una ruta :

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User,
    props: true
  }
]

En este punto route.paramsse establecerán directamente como props del componente, para que el componente se desacople de los parámetros de enrutamiento:

<template>
  <div>User {
   
   { id }}</div>
</template>

<script setup lang="ts">
const props = defineProps<{
  id: string
}>()
console.log(props.id)
</script>

modo booleano

Cuando propsse establece en true, route.paramsse establecerá como accesorios del componente.

vista nombrada

Para rutas con vistas con nombre, debe definir propsla configuración para cada vista con nombre:

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]

modo de objeto

Cuando propses un objeto, establece este objeto como accesorios de componente. Útil cuando los accesorios son estáticos.

const routes = [
  {
    path: '/user',
    component: User,
    props: { newsletterPopup: false }
  }
]

 modo de función

También podemos crear una función que devuelva props. Esto le permite convertir argumentos a otros tipos:

const routes = [
  {
    path: '/user',
    component: User,
    props: route => ({ id: route.query.userId })
  }
]

Estos /user?userId=123parámetros se convertirán { id: '123' }como accesorios para Userel componente.