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)。