element-ui的学习笔记

今天学习了一下element-ui组件库

element-ui是一款常见的vue技术栈组件库

比较常见的组件库有:
移动端 Vant,Cube-Ui,NutUI
PC端:element-ui,Ant Design of Vue,iView 小程序: uniapp 组件库的使用流程基本一致,都是下包,引入main.js文件中使用

element-ui的使用流程:

element-ui的安装

在终端中

npm i element-ui -S   //-S: 是--save的简写，表示 这个包是生产依赖

main.js中引入并注册

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

使用组件的基本思路是：在官网上进行 cv操作,官网上有许多代码示例,直接cv就可以满足大部分需求,不过有时候也会遇到一些小问题,今天就遇到一个小问题,在切换路由后刷新页面会出现路由和菜单栏不一致的情况

遇到的小问题

以下是我的菜单栏代码

<el-menu
    
    class="el-menu-vertical-demo"
    :router='true'
    :unique-opened='true'
    >
   
    <!-- router 打开路由模式 -->
    <!-- unique-opened 只能同时展开一个菜单栏 -->
    
    <el-menu-item index="/layout/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="/layout/my">
        <i class="el-icon-setting"></i>
        <span slot="title">分页数据</span>
    </el-menu-item>
    <el-menu-item index="/layout/change">
        <i class="el-icon-setting"></i>
        <span slot="title">数据转换</span>
    </el-menu-item>
</el-menu>

问题图例:

可以看到,当我点击第二菜单后刷新页面,默认选中第一个菜单,但我的路由路径并没有跟着改变,这是因为页面刷新并不会刷新路由,但默认选中会刷新,导致我的选中与路径不匹配

解决方案:

后来我就想,为什么不给他一个点击事件呢,当页面菜单点击后会出现高亮提示,页面刷新默认自执行第一菜单的点击事件,这样就可以解决路由路径与菜单不匹配这一问题,当然这样做是可行的,但是我又想,既然我用了element-ui组件库,那么肯定是有这一问题的解决方法,于是我就去官网查询,果然被我找到了

通过设置该属性,使我的home页面默认为主页

<el-menu
default-active='/layout/home'  //设置了我的home页面为默认页面,网页刷新就选中index对应的路由路径菜单
class="el-menu-vertical-demo"
:router='true'
:unique-opened='true'
>
    <el-menu-item index="/layout/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="/layout/my">
        <i class="el-icon-setting"></i>
        <span slot="title">分页数据</span>
    </el-menu-item>
    <el-menu-item index="/layout/change">
        <i class="el-icon-setting"></i>
        <span slot="title">数据转换</span>
    </el-menu-item>
</el-menu>

这时候我发现问题还是没有解决 ,虽然设置了默认菜单高亮,但是页面刷新路径是不会改变的,问题只解决了一半,这时我通过百度得到了另一种写法

<el-menu
:default-active='$route.path' //通过路由获取当前的路径,再将路径设置为菜单默认选中的值,这样就将菜单和路由绑定在了一起
class="el-menu-vertical-demo"
:router='true'
:unique-opened='true'
>
    <el-menu-item index="/layout/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="/layout/my">
        <i class="el-icon-setting"></i>
        <span slot="title">分页数据</span>
    </el-menu-item>
    <el-menu-item index="/layout/change">
        <i class="el-icon-setting"></i>
        <span slot="title">数据转换</span>
    </el-menu-item>
</el-menu>

问题成功解决

思考: 有时候在解决问题中会陷入思考误区,这对新手来说是最大的困难,只有通过不断的练习,遇到错误积极记录,不断从错误中吸取经验,才能提升思维 ,在之后遇到同样问题才可以花费极少的时间解决