vue3 路由传参boolean值 ts 报错 设置了路由的props还是报错

可以尝试在定义路由时，使用props解构的方式来传递参数，示例代码如下：

const routes: Array<RouteRecordRaw> = [
  {
    path: '/example',
    name: 'Example',
    component: ExampleComponent,
    props: route => ({ boolProp: Boolean(route.query.boolProp) })
  }
]

interface ExampleProps {
  boolProp: boolean
}

const ExampleComponent: defineComponent<ExampleProps> = (props: ExampleProps) => {
  // your component logic
}

在这个示例中，我们使用了`props`选项来定义路由的props。在这里，我们使用了一个函数，通过解构`route.query.boolProp`来传递布尔值参数。同时，我们还定义了一个`ExampleProps`接口，来明确`ExampleComponent`组件所需要的props类型。

这样设置后，在组件内部就可以使用`props.boolProp`来访问传递的布尔值参数了。

相关问题

vue3 路由传参boolean值 ts 报错

如果在 TypeScript 中使用 Vue3 的路由传递 boolean 值，会出现类型不匹配的报错。这是因为 TypeScript 默认将 boolean 值解析为 true 或 false 字符串，与我们实际需要的 boolean 值不一致。

解决方法是在路由配置中设置 props 的类型为 any，这样就可以接收任何类型的参数，包括 boolean 值。示例如下：

import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/example/:isShow',
    name: 'Example',
    component: Example,
    props: (route) => ({
      isShow: route.params.isShow === 'true'
    } as any)
  }
]

在组件中接收 boolean 值的代码不需要修改，可以直接使用。

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    isShow: {
      type: Boolean,
      required: true
    }
  },
  // ...
})

这样就可以在 TypeScript 中正确地传递和接收 boolean 值了。

elementplus菜单与路由

### Element Plus 菜单与 Vue Router 集成教程

#### 创建项目并引入所需库

为了使 `Element Plus` 和 `Vue Router` 正常工作，需先安装这些依赖项。可以通过 npm 或 yarn 来完成此操作[^2]。

npm install vue-router@next element-plus unplugin-vue-define-options

#### 初始化路由配置

定义基本的路由规则来匹配不同的路径到相应的视图组件。这通常是在项目的入口文件中完成，比如 `main.js` 文件内：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router;

#### 使用递归菜单组件

对于复杂的多级菜单结构，可以利用递归的方式构建菜单树形结构。下面是一个简单的例子展示了如何创建一个能够处理任意层数级别的菜单列表[^3]。

<template>
  <el-menu :default-active="activeIndex">
    <!-- 动态渲染子菜单 -->
    <menu-item v-for="(item,index) in menuData" :key="index" :data="item"></menu-item>
  </el-menu>
</template>

<script setup lang="ts">
// 假设这里有一个获取菜单数据的方法 getData()
let activeIndex = ref('0');
let menuData = reactive(getData());
</script>

其中 `<menu-item>` 组件负责解析每一层的数据，并决定是否继续向下一层遍历显示更多子项。

#### 实现 MenuItem 组件逻辑

MenuItem 组件内部会判断当前节点是否有 children 属性存在，如果有则再次调用自己形成新的层级；如果没有，则作为叶子节点链接至指定页面地址。

<!-- MenuItem.vue -->
<template>
  <div v-if="hasChildren()">
    <el-sub-menu :index="String(data.id)">
      <template #title>{{ data.title }}</template>
      <menu-item v-for="(child,idx) in data.children" :key="idx" :data="child"/>
    </el-sub-menu>
  </div>
  <div v-else>
    <router-link :to="{name:data.link}">
      <el-menu-item :index="String(data.id)">{{ data.title }}</el-menu-item>
    </router-link>
  </div>
</template>

<script setup lang="ts">
interface Props {
  data: any; // 这里应该更具体化接口类型
}

withDefaults(defineProps<Props>(), {});

function hasChildren(): boolean {
  return Array.isArray(this.data?.children) && this.data.children.length > 0;
}
</script>

这样就实现了基于 `Element Plus` 的菜单系统同 `Vue Router` 的无缝对接，在实际开发过程中可以根据需求调整样式和交互效果以满足业务场景的要求。