vue-router&vuex

vue-router

1. 根据url进行动态的don移除增加操作，就是路由器的作用
2. 在router.js中加上 mode: 'history'，可以优化引擎

    http://localhost:8080/#/page1 == ( mode: 'history ') ==  http://localhost:8080/page1

3. 进行页面间的跳转 this.$router.push('/page2/vuejs')

4. router使用

   1. 配置路由
   2. 安放路由出口 <router-view>
   3. 导航链接 <router-link>
   4. 传参方式
      • 占位符传参(必选参)
      • 查询参的参数（可选参）
      • $route,$query获取参数
   5. 嵌套
   6. 异步路由: 路由懒加载异步组件
   7. 守卫--处理权限的问题 router.beforeEach((to,from,next)=>{
      • 全局router.beforeEach
      • 路由beforeEnter
      • 组件beforeRouteEnter

5. 命令： vue add router

6. $router 进行跳转是路由器 ; $route 获取参数是路由

7. 带参数进行跳转时如： /page2/1/vue.js(含有两个参数)

   this.$router.push({name: 'page2',params: {id: 1,msg: 'vue.js'}})
   //router.js
   routers: [
   {path: '/page2/:id/:msg',name: 'page2',component: Page2}
   {path: '/static',component: Page1,props: {foo: 'bar'}}//给组件传静态值
   ]
   

8. 获取参的方式 $route.params.msg
   查询参的方式 $route.query.msg

vuex状态管理 0. 不同状态进行数据共享的时候

1. 配置

   {
       state: {} //存放动态数据
       mutations: {}  //更改数据
       getters: { } //计算数据
       actions: { } //异步操作后才去更改数据的时候需要用到
   }
   

2. 使用

   • stroe.state.xx //读取
   • store.getters.xx
   • store.commit(xxx) //更改
   • store.dispatch(xxx)

3. 帮助方法

   • mapState
   • mapGetters
   • mapMutations
   • mapActions

4. 模块化

5. dispatch：含有异步操作，例如向后台提交数据，
   写法： this.$store.dispatch('action方法名',值)
commit：同步操作
   写法：this.$store.commit('mutations方法名',值) actions 异步操作时候使用的方法