Vue中ElementUI的思维脑图思维导图
Vue中ElementUI相关知识内容整理
树图思维导图提供 Vue中ElementUI的思维脑图 在线思维导图免费制作，点击“编辑”按钮，可对 Vue中ElementUI的思维脑图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：9bdf08ab5dd5c6550fb6bb54dac2c64d
思维导图大纲
Vue-ElementUI思维导图模板大纲
概述
使用Element前提必须要有Vue。
组件：组成网页的部件，例如超链接、按钮、图片、表格等等~
Element官网： https://element.eleme.cn/#/zh-CN
快速入门
npm i element-ui -S 使用指令在本地安装ElementUI模块，同时添加依赖
在项目的Main.js中引入ElementUI
参考ElementUI组件文档，在HomeView中进行ElementUI布局配置
构建LeftMenu.vue，参考ElementUI菜单组件构建左侧菜单
构建HeaderMenu.vue，参考ElementUI中的Dropdown 和Avatar 头像
在HomeView中挂载使用LeftMenu和HeaderMenu
修改AppVue中的Css样式
Vue脚手架路由传参
index传统传参数
Query传参
Query传参也称之为传统参数方式，传递的参数会以?key=value&key=value的方式拼接到请求路 径后面传递
并且在index.js中设置的对应路径不专门进行声明设置。（本质上就 是:to=“‘/help/store?key=value&key=value’”写法）
在跳转到门店管理页面时就可以接收参数了，在views目录的store目录的store.vue中接收传递的 参数。
Params传参
params传参方式也称之为resultFul方式传参，传递的参数会以/value/value的方式拼接到跳转路 径上，此种方式需要在index.js设置路径进行动态声明。 在router目录的index.js中对store的路径进行参数声明。
在components目录中的LeftMenu.vue中修改“帮买取快递废品回收”菜单中的“门店管理”菜单的 路由操作，传递id和name参数过去
在跳转到门店管理页面时就可以接收参数了，在views目录的store目录的store.vue中接收传递的 参数。
Query传参和Params传参的区别
query
query 在 router-link 中，to 属性允许使用 name 或 path 来指定路由。 声明路由时，不需要声明占位符来声明参数。 参数传递时以?key=value&key=value的形式拼接到请求路径上。例如：http://localho st:8080/help/store?id=1&name=门店管理菜单的名称。 接收参数时使用this.$route.query的方式接收参数
params
在 router-link 中，to 属性只允许使用 name 来指定路由。 声明路由时，需要声明占位符来声明参数，假设有id和content两个参数需要传递。例 如：path:'store/:id/:name' 参数传递时以/value/value的形式拼接到请求路径上。例如：http://localhost:8080/he lp/store/id/name 接收参数时使用this.$route.params的方式接收参数。
Vue脚手架编程式导航
push
在components目录中的LeftMenu.vue中给“帮买取快递废品回收”菜单中的“门店管理”菜单设置 点击事件
注意：如果用push方式进行query方式传参设置，那index.js中的路由需要调整，views目录中的 store目录中的store.vue中需要调整接收参数的方式
replace
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
go
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。 在views目录的store目录的store.vue中，增加回退按钮及按钮点击事件，使用go实现回退操 作。
Vue架手架项目打包
npm run build
Vue-路由
概述
Vue Router 是 Vue.js 官方的路由管理器 路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页 面，这就是路由跳转
Vue脚手架路由配置
在项目route目录 index.js文件
routes
path:'' 访问路径
name:'' route实例名称
component：~~~ 访问路径指向的组件
children:[{}] 子组件
routes为复数，表示为数组，数组中存放route实例对象
router
路由器，路由管理者 当用户点击按钮时，router回去routes中查找route寻找对应的路由， router写法基本固定
const router =new VueRouter({ mode: 'history', base : process.env,BASE_URL, routes }) export default router
router-link
用于生成可点击的链接，他会自动将目标转换为href属性，并渲染为a标签
router-view
很重要！！！
用于渲染当前路由匹配到的组件
执行流程分析
Vue脚手架案例
加载 小区管理 路由跳转
在app.vue设置
views目录中创建quarters目录，在其中创建index.vue，表示小区管理页面
在项目的router目录下的index.js文件中设置路由，这里就需要使用嵌套路由操作
在LeftMenu.vue中找到小区管理菜单，设置element支持路由操作，并设置点击菜单跳转的路径
点击菜单需要展示的页面是需要在页面布局的main部分展示的，所以需要在HomeView中将 main的部分替换为router-view（因为elementui支持了router路由操作）
设置点击"帮买取快递废品回收"菜单中的“门店管理”，跳转到门店管理页面。 在项目的views目录中创建store目录，在其中创建index.vue，表示帮买取快递废品回收页面
在项目的router目录下的index.js文件中设置路由，这里也需要使用嵌套路由操作
但是问题是，点击“帮买取快递废品回收”菜单是不会打开页面的，而是点击其下面的“门店管理” 菜单才进行跳转的，也就是说在views目录的store目录中再创建门店管理页面，然后在路由设置 中要再帮买取快递废品回收的路由中再设置嵌套路由。 在views目录的store目录中创建store.vue，表示门店管理页面。
相关思维导图模板
树图思维导图提供 904名中国成年人第三磨牙相关知识、态度、行为和病史的横断面调查 在线思维导图免费制作，点击“编辑”按钮，可对 904名中国成年人第三磨牙相关知识、态度、行为和病史的横断面调查 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：10b9a8a2dd2fb4593f8130ef16c320fc
树图思维导图提供 第1章 化工设计基本知识 在线思维导图免费制作，点击“编辑”按钮，可对 第1章 化工设计基本知识 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：70ec0519ed26419068a32a511862aadd
沪公网安备 31011502019485号
上海工商