目录
一、Vuex的使用
-
Vuex的介绍:vue的插件,增强了vue的功能
在Vue中实现
集中式状态(数据)管理
的一个Vue插件,在Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间的通信
-
Vuex的使用流程
- state:存储数据的地址
- actions:服务员,中转站
- mutations:厨师,真正改变state数据的地方
- 使用步骤:
- 在
state
中定义变量 - 在组件中通过
this.$store.dispatch('actions中定义的函数')
,触发actions中的函数执行 - 在
actions
中的函数中,调用context.commit('mutations中定义的函数')
- 在
mutations
中定义的函数实现真正的修改state中的数据 - 页面中只要使用
$store.state.变量
,变量变化,页面就变化,实现了组件间通信 - 注意:
- 在组件中可以直接调用commit触发
mutations中定义的函数
- 在组件中可以直接修改state中定义变量
- 在组件中可以直接调用commit触发
- 在
-
vuex的执行流程
二、Vue-router的使用
-
介绍
官方提供的
用来实现SPA的vue插件
有了它以后,我们可以写很多页面组件,通过地址栏的不同路径先是不停地页面组件
-
基本使用步骤
-
新建router/index.js
const routes = [配置路由1,配置路由2]
-
main.js中使用:之前已经写好的
import router from './router' new Vue({ ... router, ... }).$mount('#app')
-
只需要写页面组件,配置路由即可
-
在App.vue中加入
<router-view> </router-view>
-
在浏览器访问const routes 中配置的路径,就能看到对应的页面组件
-
-
路由的跳转
-
使用步骤:
-在html中使用: <router-link :to="path">去登录</router-link> -在js中使用: this.$router.push('goods')
-
-
路由跳转携带参数
-
两种情况:
- 带在请求地址中以:?name=zhang&age=19
- 在地址中类似于django的分组:/goods/1/
-
情况一:请求地址中
<router-link to="/login/?name=zhang&age=19">去登录<router-link> 组件中接受:this.$route.query.取
-
情况二:地址中
<router-link to="/login/zhang">去登录<router-link> 组件中接受:this.$route.params.取
-
-
路由嵌套步骤
-
router/index.js相应的路由中
{ path:'/goods', name:'/goods', component:Goods, children:[ { path:'list', name:'list', component:GoodList }, { path:"detail", name:'detail', component:GoodDetail } ] }
-
必须要在Goods组件中,写
<router-view></router-view>
-
使用router-link标签跳转
-
只会变更Goods下router-view包裹的位置
-
-
路由守卫
1.作用 对路由进行权限控制 2.前置路由守卫 router.beforeEach((to,from,next)=>{ console.log('前置路由守卫',to,from) if (to.name == 'shoppingcar'){ let name = localStorage.getItem('name') if (name) { next() }else{ alert('不好意思没有权限') } }else{ next() } }) 3.后置路由守卫 router.afterEach((to,from)=>{ console.log('后置路由守卫',to,from) document.title = to.name })