踩坑记20 element-plus 默认语言设置 | el-pagination 分页器自动换行 | vue-router Maximum call stack size exceeded

2021.9.6

坑64（element-plus、语言配置）：element-plus默认语言是英文。而目标是配置语言为中文。参考文档 组件 | Element (element-plus.org) 国际化，可以很快配置完成，代码如下：

// main.js

import ElementPlus from 'element-plus'

import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, { locale: zhCn, })

此外还可以使用el-config-provider组件进行配置，方法见文档：

组件 | Element (element-plus.org)   Config Provider 配置

坑65（el-pagination、分页器自动换行）：查看页面元素可发现el-pagination设置了white-space: nowrap，使其内部元素不自动换行。所以设置css使其换行即可，代码如下：

.el-pagination {

    white-space: normal !important;

}

参考： white-space - CSS（层叠样式表） | MDN (mozilla.org)

踩坑：开始以为是行内元素和块元素设置导致未自动换行，后排查发现el-pagination是block，内部需换行的元素是inline-block，是符合换行需求的。之后才找到是white-space导致。

参考：css+div横向排列自动换行 - Kaiqisan_Kaiqisan的博客-CSDN博客_div横向排列自动换行

总结---块级元素+行内块元素自动换行（非flex布局）排查：

1、注意元素display设置，自动换行需要父元素display: block，子元素display: inline-block。

2、注意父元素的white-space设置，normal、pre-wrap、pre-line、break-spaces填充行型盒子时换行，nowrap、pre填充行型盒子时不换行。

坑66（vue-router、Maximum call stack size exceeded、404、name重复）：在地址栏输入本该跳转到404的页面时，vue-router提示超出最大调用栈堆的大小，如下：

[Vue Router warn]: Unexpected error when starting the router: RangeError: Maximum call stack size exceeded

    at Object.resolve

    ......

经排查，发现原因是静态路由和动态路由重复使用了404这一名称。路由文件中配置的静态路由404，只匹配/404这一路径。而在添加动态路由时，在最后设置通用匹配，将其他未匹配成功的路径都重定向到404页面。此时也使用了'404'这一名称，将其修改为其他不重复名称或直接去掉名称即可，代码如下：

// router/index.js

// 路由文件中配置的静态路由404，只匹配/404这一路径

{

    path:'/404',

    name:'404',

    component:()=>import('@/views/404.vue'),

}

// store/action.js

//  获取动态路由时，最后设置通用匹配，将其他未匹配成功的路径都重定向到404页面

{

    path: '/:pathMatch(.*)*',

    name: 'other',  // 修改前：name: '404',

    redirect: '/404'

}

by 莫得感情踩坑机(限定)