Tabla de contenido
(2) La capa de vista pasa parámetros
Método 2 (utilice accesorios para reducir el acoplamiento)
(2) Pasar parámetros es lo mismo que antes
(3) Reciba parámetros en Profile.vue para agregar atributos de accesorios al componente de destino
(1) Configure la ruta de redirección en router/index.js
1. Paso de parámetros
método uno
(1) Modifique la configuración de enrutamiento, principalmente agregando un marcador de posición como: id al atributo de ruta en index.js debajo del enrutador
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile
}
(2) La capa de vista pasa parámetros
<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
ilustrar:
En este momento, cambiamos el to en la posición de enlace de ruta en Main.vue a: to, para usar este atributo como un objeto. Tenga en cuenta que el nombre del atributo de nombre en el enlace del enrutador debe coincidir con el nombre del atributo de nombre en el ruta Debido a esto, Vue puede encontrar la ruta de enrutamiento correspondiente
(3) Parámetros de recepción
<template>
<!-- 所有的元素必须在根节点下-->
<div>
<h1>个人信息</h1>
{
{$route.params.id}}
</div>
</template>
ilustrar:
Todos los elementos deben estar debajo del nodo raíz; de lo contrario, se informará un error.
(4) prueba
Método 2 (utilice accesorios para reducir el acoplamiento)
(1) Modifique la configuración de enrutamiento, principalmente agregando accesorios: atributo verdadero al atributo de enrutamiento en index.js en el enrutador
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile,
props: true
}
(2) Pasar parámetros es lo mismo que antes
<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
(3) Reciba parámetros en Profile.vue para agregar atributos de accesorios al componente de destino
<template>
<div>
个人信息
{
{ id }}
</div>
</template>
<script>
export default {
props: ['id'],
name: "UserProfile"
}
</script>
<style scoped>
</style>
(4) prueba
2. Redirección
La redirección en Vue funciona cuando las rutas son diferentes pero los componentes son los mismos
(1) Configure la ruta de redirección en router/index.js
{
path: '/main',
name: 'Main',
component: Main
},
{
path: '/goHome',
redirect: '/main'
}
(2) Ver aumento
<el-menu-item index="1-3">
<!--插入的地方-->
<router-link to="/goHome">返回首页</router-link>
</el-menu-item>