[JavaScript知识库]vue2重要知识点

路由

router，route，routes区别

1.router：路由器对象（new的路由器对象），包含一些操作路由的功能函数，来实现编程式导航。一般指的是在任何组件内访问路由。如：路由编程式导航的$router.push()

2.routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象

3.route：指路由对象表示当前激活的路由的状态信息。如：this.$route指的是当前路由对象，path/meta/query/params

路由导航方式

声明式导航 router-rink

组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有超链接的 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

router-link的to属性，默认写的是path（路由的路径），可以通过设置一个对象，来匹配更多

 <router-link to="/home">首页</router-link>
 <router-link to="/about">关于</router-link>

编程式导航

编程式路由导航是通过JS代码实现路由的跳转。

1. this.$router.push(path)：相当于点击路由链接（可以返回到当前路由界面）
2. this.$router.replace(path)：用新路由替换当前路由（不可以返回到当前路由界面）
3. this.$router.back()：请求（返回）上一个记录路由
4. this.$router.go(-1)：请求（返回）上一个记录路由

注意：组件对象属性有$route和$router.
$route：当前组件存数据的，可以传递访问数据。
$router.：路由器，功能的对象，操作路由的基本方法，可实现路由跳转栈结构。

import Vue from "vue";
import VueRouter from "vue-router"

Vue.use(VueRouter)

const routes=[
  {
    path:'',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home
  },
  {
    path:'/category',
    component:Category
  },
  {
    path:'/user',
    component:User
   },
]
const router= new VueRouter({
  routes,
  mode:'history'
})
export default router

=======================
 <template>
  <div class="tab-bar-item" @click="itemClick">
    <div v-if="!isActive">
      <slot name="item-icon"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabBarItem',
  props: {
    path: String,

  },
  computed: {
    isActive() {
        //判断
      return this.$route.path.indexOf(this.path) !== -1
    }
  },
  methods: {
    itemClick() {
        //新路由替换当前路由
      this.$router.replace(this.path)
    }
  }
}
</script>

路由守卫

路由守卫就是路由跳转的一些验证，比如登录鉴权（没有登录不能进入个人中心页）等等等

分三大类：

1. 全局守卫

   前置守卫：beforeEach 后置钩子：afterEach

2. 单个路由守卫

   独享守卫：beforeEnter

3. 组件内路由守卫

   beforeRouteEnter 路由进入前

   beforeRouteUpdate 路由变化时

   beforeRouteLeave 路由离开后

所有的路由守卫都是三个参数：
to： 要进入的目标路由（去哪儿）

from： 要离开的路由（从哪来）

next： 是否进行下一步（要不要继续）

写next()相当于 next(true) 继续执行

不写 相当于next(false)终止执行

next(path)跳转 例如：next(“/login”)

注意：后置钩子afterEach没有next参数

vuex

VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态。

Vue有五个核心概念，state, getters, mutations, actions, modules

state

state即Vuex中的基本数据

Vuex使用单一状态树，即用一个对象就包含了全部的状态数据。state作为构造器选项，定义了所有我们需要的基本状态参数。

const store =new Vuex.Store({
    state:{
        counter:1000
    }
})
=============
<template>
  <div id="app">
    <h2>{{$store.state.counter+1}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <hello-vuex/>
  </div>
</template>

getters

store的state中派生出的状态。

getters接收state作为其第一个参数，接受其他 getters 作为第二个参数，如不需要，第二个参数可以省略

const store = new Vuex.Store({
    state: {
        counter:0
    }，
    getters: {
        // 单个参数
        counts: function(state){
            return state.counter * 2
        },
        // 两个参数
        countss: function(state, getters) {
            return getters.counts * 2
        }
    }
})

mutations

提交mutation是更改Vuex中的store中的状态的唯一方法，且mutation必须是同步的。

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。（提交荷载在大多数情况下应该是一个对象）,提交荷载也可以省略的。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    //无提交荷载
    increment(state) {
        state.count++
    }
    //提交荷载
    incrementN(state, obj) {
      state.count += obj.n
    }
  }
})

action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      setInterval(function(){
        context.commit('increment')
      }, 1000)
    }
  }
})

Modules

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

组件化开发和模块化开发的区别

组件化：

1: 就是"基础库"或者"基础组件", 意思就是把重复的代码部分提炼出一个个组件供给功能使用

2: 功能相对单一或者独立, 在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。

3: 使用场景: 是对一些重复代码进行封装在需要的时候调用即可(例如: 按钮, 输入框, 搜索框)

模块化:

1: 就是"业务框架"或者"业务模块", 将不同的业务进行划分, 同一类型的整合在一起, 所以功能会相对复杂, 但是都属于同一个业务

2: 按照项目功能需求划分成不同类型的业务框架（例如：注册、登录、外卖、直播…）

3: 目得: 隔离.分装, 模块之间有依赖的关系, 可以通过路由进行模块直接的耦合问题

清晰了组件化和模板化各自的概念之后，两者的区别也就清楚了。

区别：

模块化：是从代码逻辑的角度进行划分；方便代码进行分层开发，保证每个功能模块的职能单一

组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的复用