Vue Router 是 Vue.js 的官方路由。

它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

功能包括：

• 嵌套路由映射

• 动态路由选择

• 模块化、基于组件的路由配置

• 路由参数、查询、通配符

• 展示由 Vue.js 的过渡系统提供的过渡效果

• 细致的导航控制

• 自动激活 CSS 类的链接

• HTML5 history 模式或 hash 模式

• 可定制的滚动行为

• URL 的正确编码

详细介绍一下 vue-router

Vue Router 是 Vue.js 的官方路由管理器，它允许你为单页应用程序创建页面路由。

使用 Vue Router，你可以定义不同的路由，为用户导航到不同的视图，同时保持应用程序的单页特性。以下是 Vue Router 的一些核心特性：

1. 动态路由：Vue Router 允许你定义动态路由，即路由的某些部分可以作为变量。

2. 嵌套路由：支持嵌套的路由，这意味着你可以将一个 Vue 组件作为另一个组件的子路由。

3. 路由参数：可以捕获 URL 中的参数，并在你的 Vue 组件中使用这些参数。

4. 查询参数：Vue Router 可以解析和使用 URL 查询字符串参数。

5. 视图切换：支持使用 `` 组件在不同路由之间动态切换视图。

6. 编程式导航：除了在模板中使用 `` 进行声明式导航外，Vue Router 还支持编程式导航。

7. 滚动行为：可以自定义滚动行为，例如在路由切换后滚动到顶部或保持原先的滚动位置。

8. 路由守卫：Vue Router 提供了路由守卫（钩子），允许你在路由变化前或变化后执行某些逻辑。

9. 命名视图：支持定义命名视图，可以在单个路由中显示多个视图，有助于布局的复用。

10. 官方支持：作为 Vue.js 的官方路由管理器，Vue Router 与 Vue.js 紧密集成，确保了良好的兼容性和性能。

11. 模块化：Vue Router 支持模块化，可以根据需要导入和使用。

12. TypeScript 支持：Vue Router 支持 TypeScript，提供了类型定义文件，方便开发者进行类型检查和自动完成。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

什么是“状态管理模式”？

让我们从一个简单的 Vue 计数应用开始：

const Counter = {
  // 状态
  data () {
    return {
      count: 0
    }
  },
  // 视图
  template: `
    {{ count }}
  `,
  // 操作
  methods: {
    increment () {
      this.count++
    }
  }
}

createApp(Counter).mount('#app')

每一个 Vuex 应用的核心就是 store（仓库）。

“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。

至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。

存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，例如状态对象必须是纯粹 (plain) 的。

参考：Vue#data。

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。

这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = createStore({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

Action 类似于 mutation，不同在于：

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

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

让我们来注册一个简单的 action：

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})