Plus Vben5

主题

常见问题 ​

前言 ​

算是 Vue/Router 基础知识了, 但是很多人不知道

添加页面 ​

添加页面必须使用单标签, 由于使用了Transition来设置切换动画, 所以必须使用单标签来包裹内容

详见 Vue3 - Transition

txt
<Transition> 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。

会导致: 页面白屏 路由切换白屏

例如:

vue
错误的 1
<template>
  <div></div>
  <div></div>
</template>
2
<template>
  <!-- 这也是错误的 -->
  <div></div>
</template>

特别注意

避免 2 这种写法 这种写法控制台不会产生 warning

组件名重复导致的 404 ​

在Vue-Router中 路由 Name 不能重复, 否则后一个会覆盖前一个导致 404 链接

txt
所有路由的命名都必须是唯一的。如果为多条路由添加相同的命名，路由器只会保留最后那一条。

由于后端路由 name 使用path+id格式, 故不会产生 404 问题

但需要注意本地路由name不能重复

Select 等有浮层组件偏移 ​

一些有浮层的组件 比如Select PopConfirm 等, 默认展示的浮层是挂载在 body 下 在有滚动条的情况下会出现偏移 不会跟随滚动条, 所以需要设置getPopupContainer属性来指定浮层的渲染位置

解决

vue
<template>
  <Select :getPopupContainer="getPopupContainer" />
</template>

<script lang="ts" setup>
// 挂载到父节点
import { getPopupContainer } from "@/utils";
</script>

官方: 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。