vue--10.路由守卫、仓库vuex、elementUI框架

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

目录

文章目录

1.路由守卫

1.1全局守卫

1.2路由独享的守卫

1.3组件内部生命周期守卫

2、仓库vuex

2.1 State

2.2 Getter

2.3 Mutation

2.4 Action

2.5 Module

3、elementUI框架

---

---

1.路由守卫

1.1全局守卫

全局前置钩子router.beforeEach(fn)，导航被触发----一般登录验证

全局解析钩子router.beforeResolve(fn)，组件初始化

全局后置钩子router.afterEach(fn)，没有next，导航被确认,一般路由跳转以后用window把窗口调上去

示例应用如下：

在router文件里面的index.js里面去写入：

1.2路由独享的守卫

1、路由独享的守卫beforeEnter(to,from,next)，路由初始化(组件未初始化)----

        a，路由鉴权-----用户体验：界面，功能，bug，效率，权限

        b，组件异步加载情景中(插件配置：syntax-dynamic-import)

2、beforeEnter模板如下：

3、beforeEnter 示例应用如下：

1.3组件内部生命周期守卫

beforeRouteLeave 从该组件离开

beforeRouteEnter(to,from,next)，组件被激活，使用不了this，故构造指定该next 可以接收一个回调函数接收当前vm 实例----路由传参获取参数，得到初始化数据

beforeRouteUpdate(to,from,next)，组件重用时被调用----路由传参获取参数，避免增添watch 开销

导航守卫执行顺序：beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach

出发路由，预备从当前组件离开，判断路由变化，判断组件是否重用，判断新路由初始化，判断组件初始化，路由与组件初始化完毕，路由组件重定向完毕

beforeRouteLeave示例如下：

2、仓库vuex

1、下载引入vuex：vue create init  ==> 选择配置vuex

2.1 State

1、创建state状态,状态就是那个存数据的对象

2、组件中访问数据：this.$store.state.msg

2.2 Getter

1、getter就就像是store的计算属性,它会传入state对象供我们操作

2、组件中访问数据：this.$store.getters.bigMans

2.3 Mutation

组件中希望更改 Vuex 的 store 中的状态(数据)的唯一方法是提交 mutation

这样设计的原因是,只有通过mutation来更新数据,它才会去帮我们通知所有使用数据的组件更新数据 刷新UI

不要用赋值表达式直接在组件中给store设置新数据

组件中使用

        2.1 直接触发并传值(提交载荷)：this.$store.commit('increment',{n:100})

        2.2 可以以一个对象的形式传入：

2.4 Action

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

使用的两种情况：

        1.直接分发：this.$store.dispatch('increment',{n:100})

        2.以对象形式分发

 

2.5 Module

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter

3、elementUI框架

安装：npm i element-ui -S

引入：

使用步骤：

在main.js里面去引入：