Vue3.2中通过路由向组件中传参

问题描述

通过访问/error/info，组件中显示具体的info值，如：/error/系统出错，在组建中就显示“系统出错”

解决方案

方法一：

 路由代码

   {
      path: '/fail/:info',
      name: 'fail',
      component: () => import('@/views/error/fail.vue'),
   }

组件代码

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
const info = route.params.info
</script>

<template>
    <el-empty :description="info" class="empty">
    </el-empty>
</template>

<style scoped>
.empty{
    height: 100vh;
    width: 100vw;
}
</style>

方法二

路由代码

    {
      path: '/fail/:info',
      name: 'fail',//授权失败页面
      component: () => import('@/views/error/fail.vue'),
      props: true // 将参数作为props传递给组件
    },

组件代码

<script setup lang="ts">
import { toRefs,defineProps} from 'vue'

const props = defineProps({
     info: String,
})
const {info} =toRefs(props)
</script>

<template>
    <el-empty :description="info" class="empty">
    </el-empty>
</template>

<style scoped>
.empty{
    height: 100vh;
    width: 100vw;
}
</style>