vue-router 4.X & vuex4.X & element-plus

120 阅读1分钟

vue-router 4.X

npm install vue-router@4

实例创建及基本使用

image.png

动态添加路由

image.png

动态删除路由

image.png

编程式导航

image.png

route对象属性

image.png

router-link的v-slot

image.png

router-view的v-slot

image.png

路由守卫

image.png

image.png

  • 和next说拜拜,现在确认跳转不需要再手动执行这个函数了,而是根据你的返回值来决定行为。同样支持异步返回 Promise。

  • 现在的路由守卫 API 更加友好且合理了,可以完美利用 async await 做异步处理,比如这样:

image.png

useLink

image.png

其他一系列变化

image.png

image.png

VueX 4.X

npm i vuex@next

main.js

image.png

基本使用

image.png

image.png

image.png

image.png

setup中基本使用

image.png

setup中mapState使用

image.png

image.png

setup中mapGetters使用

image.png

setup中mapMutations使用

image.png

setup中mapActions使用

image.png

基操

image.png

分模块

image.png

  • 主入口

image.png

  • modules

image.png

  • 五板斧

image.png

  • 页面使用

image.png

样式管理

npm i sass -D

image.png

element-plus

npm install element-plus --save

全局引入使用

image.png

按需引入使用

  • npm install vite-plugin-style-import -D

image.png

按需引入升级一下

image.png