Vue3官网-规模化（二十）Vue Router路由、Vuex状态管理模式、服务端渲染（SSR指南）、安全

Vue3官网-规模化（二十）Vue Router路由、Vuex状态管理模式、服务端渲染（SSR指南）、安全

总结：

• Vue Router
  • https://next.router.vuejs.org/zh/introduction.html
  • 在web开发中，“route”是指根据url分配到对应的处理程序。
  • 不同的请求地址会交给路由处理来转发给相应的控制器处理，所以说路由就可以在转发前修改转发地址，你可以在这上面大作文章。
  • 为什么要使用路由？
    • 传统web开发是每一个请求地址都会请求服务器来进行处理，但是用户有些操作则无需请求服务器，直接页面端修改下逻辑就能达到目的，这种最好使用路由，也许题主会有疑问：直接使用js处理下不就行了。使用js直接处理这些是可以的，事实上以前我们也这么做，但是这样做不便于用户收藏当前页，因为使用js时并不更新url，但是使用路由时，url也是随着改变的，用户浏览到一个网页时可以直接复制或收藏当前页的url给别人，这种方式对于搜索引擎和用户来说都是友好的。
• Vuex
  • Vuex 是什么？
    • Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式 + 库**。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  • 状态管理模式
    • 状态，驱动应用的数据源；
    • 视图，以声明方式将状态映射到视图；
    • 操作，响应在视图上的用户输入导致的状态变化。
  • 什么情况下我应该使用 Vuex？
    • 您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
• 服务端渲染（SSR指南）
  • SSR 完全指南
    • 我们创建了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入，适合已经熟悉 Vue、webpack 和 Node.js 开发的开发者阅读。请移步这里。

1. 路由（vue-router）

官方 Router

对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。

从零开始简单的路由

如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件：

const {
    createApp, h } = Vue

const NotFoundComponent = {
    template: '<p>Page not found</p>' }
const HomeComponent = {
    template: '<p>Home page</p>' }
const AboutComponent = {
    template: '<p>About page</p>' }

const routes = {
   
  '/': HomeComponent,
  '/about': AboutComponent
}

const SimpleRouter = {
   
  data: () => ({
   
    currentRoute: window.location.pathname
  }),

  computed: {
   
    CurrentComponent() {
   
      return routes[this.currentRoute] || NotFoundComponent
    }
  },

  render() {
   
    return h(this.CurrentComponent)
  }
}

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

结合 HTML5 History API，你可以建立一个麻雀虽小但是五脏俱全的客户端路由器。为了获得更多的实践，可以直接查看实例应用。

整合第三方路由

如果你有更加偏爱的第三方路由，如 Page.js 或者 Director，整合起来也一样简单。这里有一个使用了 Page.js 的完整示例。

2. 状态管理（Vuex）

类 Flux 状态管理的官方实现

由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 Vuex：我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools，无需配置即可进行时光旅行调试 (time travel debugging)。