vue-router和vuex

element ui 按需引入

• element 按需 两种1. vue add element 2. vue ui 安装插件 3. 下载 element 包，搭配 babel-plugin-import 包 配置按需加载

vue-router 安装

• 在 npm 中使用 npm i vue-router 安装

组件中使用

• 在组件中使用路由功能，需要使用路由提供的各种组件
  1. router-view 用来展示页面组件,页面地址和某个路由对象的 path 匹配的话会展示对应的组件
     • 匹配的规则 在 routes 中严格匹配 并且只能匹配一个（第一个成功的）严格匹配 不包括查询部分和锚点部分
  2. router-link 实现路由的跳转，也就是页面的跳转 必须传递 to prop 也就是页面跳转的地址，当地址和 to 匹配的时候会自动添加一些类名，匹配的规则是包含匹配，比如当地址是/pins的时候 匹配 /pins 和 /
     • to=’/’ :to="{path:’/’}" :to="{ name: ‘pins’ }"这个需要路由命名
     • to 的属性值可以是一个对象{path，name，query，params}
       • path 是路径 name 是路由名字 query 是查询部分 params 是动态路由参数
     • 跳转如果不想留下历史记录 需要加 replace
     • append 为 添加路径 一般不用
     • tag 改标签 默认为 a 如果写 tag=“li” 为 li
     • active-class 设置激活时的类名 也可以构造路由的时候使用linkActiveclass设置
     • exact 精确匹配模式 比如当地址是/pins的时候 只匹配 /pins 不会在匹配’/’
     • .router-link-exact-active 精准匹配时激活的类名 这个 class 有自己的激活规则，不过有时不满足自己的条件，这时可以自己加 这个 class 名
       • :class="{ ‘router-link-exact-active’: [子路由路径数组].includes($route.path), }" 通过添加这个 class 可以解决 子路由高亮 父路由高亮冲突问题
     • 我是路由组件，路由跳转的时候传递了一些参数或者查询条件，需要根据这些条件，去展示不同的内容，传递方法有 2 种
       • query 是地址栏的查询部分也就是 ？ 部分
       • params 动态路由参数，只有路由的 path 设置了动态参数的时候才可以传递
     • 在路由组件内获取当前路由的相关信息
       • 只要是路由组件那么该组件就会得到一个当前路由信息存储在 this.$route 内
     • 动态路由
       • 在构造路由时 路径写成 path: ‘/pins/:type’ 就可以使用 params 这时 router-link 内就可以写 :to="{ name: ‘pins’, params: { type: ‘xxx’ } }" 进入的就是 pins/xxx 这个页面了，进入页面时也可以获取当前路由信息，通过 this.$route 获取
     • 其他标签跳转页面方法
       • 添加事件 $router.push(‘路径’) $router 就是整个路由实例 路由实例下有很多方法

$router 的方法

• push(地址) 去目标地址，不可以当前地址去当前地址，可以加个判断
• back() 实现历史记录返回
• go(数字) 实现历史记录的跳转，可前进也可后退，正数前进，负数后退
• replace(地址) 不产生历史记录，无法用 back 返回

$router 和 $route 的区别

• $router 是全局路由，编程导航
• $route 是当前路由

重定向

• 在 router.js 中添加数组项{path:‘错误地址’,redirect:‘正确地址’} 意思是重新定项一下到正确地址
  • redirect 写法 redirect:‘正确地址’
  • 按照 name 跳转 redirect: { name: ‘pins’ }
  • 函数写法 redirect: to =>{函数体} 这里 to 是错误的那次的 route 这个必须 return 一个地址，优点是可以判断，不同错误地址可以返回不同 地址

别名

• 添加 alias:‘地址’

路由接收 prop

• 在路由注册时写上 props：true 那么对应路由就可以接收 prop ， prop 名字为 route.params，接收的为当前路由的 路径名
• 函数方法 props：route=>({函数体})

导航守卫

• router.beforeEach((to, from, next) => {}) 必须有next 为跳转到的页面 全局前置守卫，路由跳转前触发 to 目标地址 from 来源地址
• 组件内的导航守卫
  • beforeRouterEnter

路由器的本地存储

• sessionStorage 当当前页面关闭时消失
  • 用法 sessionStorage.setItem(“islogin”, true); 就可以通过 getItem 获取islogin 也可以用 clear 清空单个数据 使用 removeItem 清空全部
• localstorage 当当前浏览器关闭时消失

路由记录

• 匹配的路由 $route 下有一个 matched 属性
• 该属性是一个数组，记录了当前地址匹配到的路由记录
• 在路由记录可以访问到对应的路由的路由原信息 就是 mate 字段

滚动条行为

• scrollBehavior (to,from,savedPosition) savedPosition 是滚动条的位置 类型为{x:0,y:0}
• 写在 new VueRouter 里面
• 只有返回的时候可以返回，跳转的时候不可以返回
• behavior: ‘smooth’ 意思为平滑滚动

动态路由

• addRoute(路由) 动态添加路由，一般需要配合 forEach 函数

  <!-- currentRoutes 当前路由数组 -->
      currentRoutes.forEach(route => {
      router.addRoute('Home', route)
    }
  

• 可以写一个全部路由数组，根据条件筛选到 currentRoute 然后，循环 currentRoute 添加到路由
• addRoute 第一个参数 可以省略，如果不省略意思为添加的路由为子路由，如果省略就不是子路由

vuex 的安装

• npm install vuex --save

在组件中使用

• 导入 vue 和 vuex 然后 Vue.use(Vuex)
• 创建

      const store = new Vuex.Store({
          state: {
              count: 10
              <!-- 可以写别的 -->
          }，
          mutations: {
              add(state) {
                  state.count++
              }
          }
      })
  

• 导出 export default store
• 在 main 中导入
• 在组件中通过 this.$store.state.count 使用，一般配合 计算属性使用

数据的修改 mutations

• store 中的数据要修改的话需要定义 mutation 函数
• mutation 函数是用来修改 store 数据的
• 每一个 mutation 函数 默认第一个参数接收的是 store 内的 state 想要修改哪儿个数据直接修改就行
• 定义好 mutation 函数之后 在组件内可以使用 store 的 commit 方法来触发对应的 mutation 函数 函数的第二个参数称为载荷数据(payload)而且只能接受 2 个参数
• this.$store.commit{(}^{\prime }ad{d}^{\prime })或者this.$store.commit({type:‘add’})
• 传参写法 this.$store.commit{(}^{\prime }ad{d}^{\prime },payload)和this.$store.commit({type:‘add’,count:值}) 接收的时候 commit 传递的对象就是第二个参数
• 对象的新增属性不会引起视图的改变 可以用 Vue 的 set 方法，或者重新赋值

      updateObject: (state, age) => {
          Vue.set(state.testObject, 'age', age)
          // 或
          // state.testObject = { ...state.testObject, age }
      }
  

state 的计算属性 getter

• getter 函数默认接收 state 作为参数，函数的返回值就是计算属性的值
• 默认接收 getters 作为第二个参数，该参数指得是所有的 getter
• 在组件中使用 this.$store.getters.commentNum

         getters: {
         commentNum(state) { 
             return state.commentArr.length
             }
         },
  

• getter 接收参数的写法
  • getter 函数要返回一个函数，返回的函数必须设置返回值，这个返回值是计算属性 返回的函数 接收组件内使用 getter 传的参
  • 第二个括号为接收的参数

      getCommentById: (state) => (id) => {
          return state.commentArr.find(item => item.id === id)
      }
  

actions 存放异步操作更新 store 数据

• 异步执行之后使用 commit 提交 mutation
• 在组件中使用 dispatch 触发 action this.$store.dispatch.action函数名
• action 函数的函数名 一般设置成和对应的 mutation 函数名相同
• 默认第一个参数是 context 与 store 实例具有相同方法和属性，我们可以从该对象中获取 commit 方法

         getComments: async ({ commit }) => {
             // 发请求获取评论数据 然后使用 commit 提交 mutation
             const res = await axios.get("/commentArr?articleId=1")
             commit('getComments', res)
         },
  

用来合并模块 modules

• key:value
• key 就是合并之后的 state 名称 value 是对应的模块值
• 尽管分了模块如果模块没有命名的话，mutation 和 action都是全局的，也就是说在组件中commit和dispatch触发对应函数的时候和原来没区别
• 获取 state 时有点区别
• 创建模块时添加 namespaced: true 意思为 添加了命名空间
  • 这样就可以不同的组件使用同样的函数名或者getter名
  • 模块添加了命名空间空间的名称是在store中合并的时候的属性名组件内访问该控件写的所有内容是需要指定空间名
  • 例如执行 action 时 this.$store.dispatch(‘空间名/action函数名’)
  • 例如获取 getter 时 this.$store.getters[‘空间名/getter名’]

辅助函数

• mapState 辅助函数获取store中的state数据
• mapstate函数调用之后会返回一个对象，该对象下的属性就相当于组件的计算属性 mapState 函数调用的时候传递参数有两种 1.对象 2.数组
• 需要先 import {mapState} from ‘vuex’

      ...mapState({
          // 对象写法
          // commentArr: (state) => state.commentsMoudlus.commentArr,
          // 写成普通函数函数内部可以使用this获取组件
          commentArr(state) {
              return state.commentsMoudlus.commentArr;
          },
      }),
      // 另一种对象写法 不是命名空间的情况下
      ...mapState({commentArr：'commentArr'})
      // 数组写法
      ...mapState(['commentArr'])
  

• mapGetters 辅助函数获取 store 中的 getters 函数

      . ..mapGetters({commentNum : "commentsModule/commentNum"}),
  

• mapActions 辅助函数获取 store 中的 aection 函数

      . ..mapActions({commentNum : "getArticle"}),