前端笔记相关博客-Java技术分享站

前端笔记 frontnote jvm123.com 是一个java技术分享站，内容涉及java、jvm、程序开发，单元测试框架Spock教程，测试视频教程，spring框架教程等，以及服务器搭建、linux、docker等相关技术。

从头开始学习Vuex

<h2 style="box-sizing: border-box; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 24px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">一、前言</h2> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">当我们的应用遇到多个组件共享状态时，会需要多个组件依赖于同一状态抑或是来自不同视图的行为需要变更同一状态。以前的解决办法： <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">a.将数据以及操作数据的行为都定义在父组件; <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">b.将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递) <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时，你可能会对 vue 组件之间的通信感到崩溃，特别是非父子组件之间通信。此时就应该使用vuex，轻松可以搞定组件间通信问题。 <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;"><img class="aligncenter" src="http://jvm123.com/wp-content/uploads/2019/09/frc-5d2610752ef75133b45d84e2cd55f63e.jpeg" alt="从头开始学习Vuex"> <h2 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 24px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">二、什么是Vuex</h2> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这里的关键在于集中式存储管理。简单来说,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)。 <h2 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 24px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">三、Vuex的原理是什么</h2> <h4 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 18px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">1.简要介绍Vuex原理</h4> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;"><img class="aligncenter" src="http://jvm123.com/wp-content/uploads/2019/09/frc-d5e5726b23a1cdea123da287de64cdac.jpeg" alt="从头开始学习Vuex"> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。 <h4 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 18px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">2.简要介绍各模块在流程中的主要功能：</h4> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li> Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。 </li> <li> dispatch：操作行为触发方法，是唯一能执行action的方法。 </li> <li> actions：操作行为处理模块,由组件中的 <code class="prettyprint code-in-text prettyprinted" style="box-sizing: border-box; font-weight: 400; background: #f3f1f1; color: #585858; font-size: 16px; line-height: 18px; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span class="pln" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">$store<span class="pun" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">.<span class="pln" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">dispatch<span class="pun" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">(<span class="str" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">'action 名称'<span class="pun" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">,<span class="pln" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">data1<span class="pun" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">)</code>来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。 </li> <li> commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。 </li> <li> mutations：状态改变操作方法，由actions中的 <code class="prettyprint code-in-text prettyprinted" style="box-sizing: border-box; font-weight: 400; background: #f3f1f1; color: #585858; font-size: 16px; line-height: 18px; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span class="pln" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">commit<span class="pun" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">(<span class="str" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">'mutation 名称'<span class="pun" style="box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; padding-right: 2px; padding-left: 2px; line-height: 22px; font-size: 14px !important;">)</code>来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。 </li> <li> state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。 </li> <li> getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。 </li> </ul> <h2 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 24px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">四、什么时候使用Vuex</h2> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果您的应用够简单，您最好不要使用 Vuex,因为使用 Vuex 可能是繁琐冗余的。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。 <h2 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 24px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">五、Vuex安装(限定开发环境为 vue-cli)</h2> <pre style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">首先要安装vue-cli脚手架，对于大陆用户，建议将npm的注册表源设置为国内的镜像(淘宝镜像），可以大幅提升安装速度。</pre> <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">npm config set registry https://[registry.npm.taobao.org](http://registry.npm.taobao.org/)</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">npm config get registry//配置后可通过下面方式来验证是否成功</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">npm install -g cnpm --registry=[https://registry](https://registry/).npm.taobao.org</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">//cnpm安装脚手架</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">cnpm install -g vue-cli</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">vue init webpack my-vue</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">cd my-vue</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">cnpm install</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">cnpm run dev</code></pre> </li> </ol> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">脚手架安装好后，再安装vuex <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">cnpm install vuex --save</code></pre> </li> </ol> <h2 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 24px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">六、如何使用Vuex</h2> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">1.如何通过Vue来实现如下效果？ <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;"><img class="aligncenter" src="http://jvm123.com/wp-content/uploads/2019/09/frc-6019c8725de0105c8348fc31d6c64fad.gif" alt="从头开始学习Vuex"> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">这个小demo很容易用vue实现，核心代码如下： <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> <div class="hello"></code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> click {{count}} times,count is {{evenOrOdd}}</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> <button @click="increment">+</button></code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> <button @click="decrement">-</button></code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> <button @click="incrementIfOdd">increment if odd</button></code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> <button @click="incrementAsync">increment async</button></code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> </div></code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> ......</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> export default {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> name: "HelloWorld",</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> data() {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> return {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> count: 0</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> };</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> computed: {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> evenOrOdd() {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> return this.count % 2 === 0 ? "偶数" : "奇数";</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> methods: {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> increment() {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> this.count = this.count + 1;</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> decrement() {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> this.count = this.count - 1;</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> // 只有是奇数才加1</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> incrementIfOdd() {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> if (this.count % 2 === 1) {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> this.count = this.count + 1;</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> // 过两秒才加1</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> incrementAsync() {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> setInterval(() => {</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> this.count = this.count + 1;</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }, 2000);</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">}</code></pre> </li> </ol> <h3 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 20px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">2.如何通过Vuex来改造上面代码？</h3> <h4 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 18px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">①创建一个store.js文件</h4> <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">import Vue from 'vue'</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">import Vuex from 'vuex'</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">Vue.use(Vuex)</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">const store = new Vuex.Store({</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> state: {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> count: 0</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> mutations: {// 包含了多个直接更新state函数的对象</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> INCREMENT(state) {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> state.count = state.count + 1;</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> DECREMENT(state) {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> state.count = state.count - 1;</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> getters: { // 当读取属性值时自动调用并返回属性值</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> evenOrOdd(state) {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> return state.count % 2 === 0 ? "偶数" : "奇数";</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> actions: { // 包含了多个对应事件回调函数的对象</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> incrementIfOdd({ commit, state }) { // 带条件的action</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> if (state.count % 2 === 1) {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> commit('INCREMENT')</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> incrementAsync({ commit }) { //异步的action</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> setInterval(() => {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> commit('INCREMENT')</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }, 2000);</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> <li> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">})</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">export default store //用export default 封装代码，让外部可以引用</code></pre> </li> </ol> <h4 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 18px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">②在main.js文件中引入store.js文件</h4> <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">import store from './store'</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">new Vue({</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> el: '#app',</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> router,</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> store,//注册上vuex的store: 所有组件对象都多一个属性$store</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> components: { App },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> template: '<App/>'</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">})</code></pre> </li> </ol> <h4 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 18px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">③新建一个模板HelloWorld.vue</h4> <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"><template></code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> <div class="hello"></code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> click {{count}} times,count is {{evenOrOdd}}</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> <button @click="increment">+</button></code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> <button @click="decrement">-</button></code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> <button @click="incrementIfOdd">increment if odd</button></code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> <button @click="incrementAsync">increment async</button></code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> </div></code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"></template></code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"><script></code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">export default {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> name: "HelloWorld",</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> computed: {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> count() {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> return this.$store.state.count;</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> evenOrOdd() {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> return this.$store.getters.evenOrOdd;</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> methods: {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> increment() {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> this.$store.commit("INCREMENT");</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> decrement() {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> this.$store.commit("DECREMENT");</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> // 只有是奇数才加1</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> incrementIfOdd() {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> this.$store.dispatch("incrementIfOdd"); //触发store中对应的action调用</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> // 过两秒才加1</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> incrementAsync() {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> this.$store.dispatch("incrementAsync");</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">};</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"></script></code></pre> </li> </ol> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">由于 store 中的状态是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。改变store 中的状态的唯一途径就是显式地提交 (commit) mutations。 <h3 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 20px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">3.如何通mapState等辅助函数优化上面代码？</h3> <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">import { mapActions, mapGetters, mapState, mapMutations } from "vuex";</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">...</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> computed: {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> ...mapState(["count"]),</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> ...mapGetters(["evenOrOdd"])</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> methods: {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> ...mapActions(["incrementIfOdd", "incrementAsync"]),</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> ...mapMutations(["increment", "decrement"])</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> </ol> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">有点必须要注意：HelloWorld.vue文件中increment函数名称要跟store.js文件mutations中一致，才可以写成 ...mapMutations(["increment", "decrement"])，同样的道理，incrementIfOdd和incrementAsync也要和store.js文件actions保持一致。 <h2 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 24px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">七、使用Vuex的注意点</h2> <h3 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 20px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">1.如何在Mutations里传递参数</h3> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">先store.js文件里给add方法加上一个参数n <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> mutations: {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> INCREMENT(state,n) {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> state.count+=n;</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> DECREMENT(state){</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> state.count--;</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> </ol> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">然后在HelloWorld.vue里修改按钮的commit( )方法传递的参数 <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> increment() {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> return this.$store.commit("INCREMENT",2);</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> },</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> decrement() {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> return this.$store.commit("DECREMENT");</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> </ol> <h3 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 20px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">2.如何理解getters</h3> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。getters就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">例如：要对store.js文件中的count进行操作，在它输出前，给它加上100。 <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">首先要在store.js里Vuex.Store()里引入getters <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">getters:{</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> count:state=>state.count+=100</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> }</code></pre> </li> </ol> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">然后在HelloWorld.vue中对computed进行配置，在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，所以要用展开运算符”…”对上节写的computed属性进行一个改造。 <ol class="linenums list-paddingleft-2" style="list-style-type: none;"> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> computed: {</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;"> ...mapGetters(["count"])</code></pre> </li> <li> <pre><code style="box-sizing: border-box; margin-left: -20px; display: flex; overflow: initial; line-height: 12px; overflow-wrap: normal; font-size: 10px; font-family: inherit !important; white-space: pre !important; border: 0px initial initial;">}</code></pre> </li> </ol> <h3 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 20px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">3.actions和mutations区别</h3> <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">actions和上面的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。 <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">同步的意义在于这样每一个 mutation 执行完成后都可以对应到一个新的状态（和 reducer 一样），这样 devtools 就可以打个 snapshot 存下来，然后就可以随便 time-travel 了。如果你开着 devtool 调用一个异步的 action，你可以清楚地看到它所调用的 mutation 是何时被记录下来的，并且可以立刻查看它们对应的状态----尤雨溪 <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">ps:如果想访问源代码，请猛戳git地址 <p style="box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start;">如果觉得本文对您有用，请给本文的github加个star,万分感谢 <h2 style="box-sizing: border-box; margin-top: 1.5rem; margin-bottom: 1rem; color: #159957; line-height: 1.35; font-size: 24px; text-align: start; white-space: normal; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">参考文章</h2> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li> vuex官方文档 </li> <li> Vuex 2.0 源码分析 </li> <li> Vuex框架原理与源码分析 </li> </ul>  本文转载自: <a href="https://mp.weixin.qq.com/s?src=11&timestamp=1569402206&ver=1873&signature=9QTfT5Gt5BHpLrSQhEcMJUm2Yt0cWkR**JX*4PwZhWnwHbkxQ2e7-vfEz7BuwRiCGM1Ityi8andRYIwC3a0abwhOY-7fwKrZ94MMUWob3bCg6A*8Xwpuw-KXT6SWVjTC&new=1" target="_blank" rel="nofollow noreferrer noopener" aria-label="（在新窗口打开）">前端工匠微信</a>

分类：js/jquery 前端笔记转载 vue
标签：前端前端技术 vue vue教程 vue-cli vuex

预览更多

2019-09-25 17:18:12.0

从头开始学习 vue-router

<blockquote style="white-space: normal; font-variant-ligatures: normal; orphans: 2; widows: 2;"> 作者：前端工匠公号 / 浪里行舟（本文来自作者投稿） </blockquote> <h2 style="margin-bottom: 1rem; font-size: 24px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">一、前言</h2> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。 <h2 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 24px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">二、vue-router是什么</h2> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。 <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行 <code class="" style="max-width: 100%; box-sizing: border-box; font-weight: 400; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span class="" style="font-size: 15px; padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; overflow-wrap: break-word !important;">npm run build</code>时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的标签是不起作用的，你必须使用vue-router来进行管理。 <h2 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 24px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">三、vue-router实现原理</h2> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。 <h3 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 20px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">1、Hash模式：</h3> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。hash 模式的原理是 onhashchange 事件(监测hash值变化)，可以在 window 对象上监听这个事件。 <h3 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 20px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">2、History模式：</h3> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">//main.js文件中</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">const router = new VueRouter({</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> mode: 'history',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> routes: [...]</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">})</code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，比较好看！ 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。 所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> export const routes = [ </code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> {path: "/", name: "homeLink", component:Home}</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> {path: "/register", name: "registerLink", component: Register},</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> {path: "/login", name: "loginLink", component: Login},</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> {path: "*", redirect: "/"}</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">]</code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">此处就设置如果URL输入错误或者是URL 匹配不到任何静态资源，就自动跳到到Home页面 <h3 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 20px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">3、使用路由模块来实现页面跳转的方式</h3> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">方式1：直接修改地址栏 <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">方式2：this.$router.push(‘路由地址’) <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">方式3： <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;"><router-linkto="路由地址"></router-link></code> <h2 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 24px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">四、vue-router使用方式</h2> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">1:下载 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;">npm i vue-router-S</code> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">2:在main.js中引入 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;">importVueRouterfrom'vue-router'</code>; <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">3:安装插件 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;">Vue.use(VueRouter)</code>; <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">4:创建路由对象并配置路由规则 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">let router = new VueRouter({routes:[{path:'/home',component:Home}]});</code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">5:将其路由对象传递给Vue的实例，options中加入 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;">router:router</code> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">6:在app.vue中留坑 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;"><router-view></router-view></code> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">具体实现请看如下代码： <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">//main.js文件中引入</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">import Vue from 'vue';</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">import VueRouter from 'vue-router';</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">//主体</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">import App from './components/app.vue';</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">import Home from './components/home.vue'</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">//安装插件</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">Vue.use(VueRouter); //挂载属性</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">//创建路由对象并配置路由规则</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">let router = new VueRouter({</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> routes: [</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> //一个个对象</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> { path: '/home', component: Home }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> ]</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">});</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">//new Vue 启动</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">new Vue({</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> el: '#app',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> //让vue知道我们的路由规则</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> router: router, //可以简写router</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> render: c => c(App),</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">})</code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">最后记得在在app.vue中“留坑” <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">//app.vue中</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><template></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <div></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> </code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <router-view></router-view></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> </div></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"></template></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><script></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> export default {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> data(){</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> return {}</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"></script></code> </li> </ol> <h2 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 24px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">五、vue-router参数传递</h2> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">声明式的导航 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;"><router-link:to="..."></code>和编程式的导航 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;">router.push(...)</code>都可以传参，本文主要介绍前者的传参方法，同样的规则也适用于编程式的导航。 <h3 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 20px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">1、用name传递参数</h3> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">在路由文件src/router/index.js里配置name属性 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">routes: [</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> path: '/',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> name: 'Hello',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> component: Hello</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">]</code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">模板里(src/App.vue)用 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;">$route.name</code>来接收 比如： <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;">{{ $route.name}}</code> <h3 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 20px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">2、通过 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; font-size: 16px; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;"><router-link></code> 标签中的to传参</h3> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">这种传参方法的基本语法： <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><router-link :to="{name:xxx,params:{key:value}}">valueString</router-link></code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">比如先在src/App.vue文件中 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><router-link :to="{name:'hi1',params:{username:'jspang',id:'555'}}">Hi页面1</router-link></code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">然后把src/router/index.js文件里给hi1配置的路由起个name,就叫hi1. <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">{path:'/hi1',name:'hi1',component:Hi1}</code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">最后在模板里(src/components/Hi1.vue)用 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;">$route.params.username</code>进行接收. <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">{{$route.params.username}}-{{$route.params.id}}</code> </li> </ol> <h3 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 20px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">3、利用url传递参数----在配置文件里以冒号的形式设置参数。</h3> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">我们在/src/router/index.js文件里配置路由 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">{</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> path:'/params/:newsId/:newsTitle',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> component:Params</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">}</code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。 <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><template></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <div></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <h2>{{ msg }}</h2></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> 新闻ID：{{ $route.params.newsId}}</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> 新闻标题：{{ $route.params.newsTitle}}</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> </div></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"></template></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><script></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">export default {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> name: 'params',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> data () {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> return {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> msg: 'params page'</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">}</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"></script></code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">在App.vue文件里加入我们的 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;"><router-view></code>标签。这时候我们可以直接利用url传值了 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><router-link to="/params/198/jspang website is very good">params</router-link></code> </li> </ol> <h3 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 20px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">4、使用path来匹配路由，然后通过query来传递参数</h3> <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><router-link :to="{ name:'Query',query: { queryId: status }}" ></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> router-link跳转Query</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"></router-link></code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">对应路由配置： <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> path: '/query',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> name: 'Query',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> component: Query</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">于是我们可以获取参数： <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">this.$route.query.queryId</code> </li> </ol> <h2 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 24px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">六、vue-router配置子路由(二级路由)</h2> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件，例如：<img class="aligncenter" src="http://jvm123.com/wp-content/uploads/2019/09/frc-41bcf3d6342a72d209ff004ba443ba7d.png" alt="从头开始学习 vue-router" /> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">如何实现下图效果(H1页面和H2页面嵌套在主页中)？ <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;"><img class="aligncenter" src="http://jvm123.com/wp-content/uploads/2019/09/frc-8d435541a87c615f5d6884163b641d8b.gif" alt="从头开始学习 vue-router" /> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">1.首先用标签增加了两个新的导航链接 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><router-link :to="{name:'HelloWorld'}">主页</router-link></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><router-link :to="{name:'H1'}">H1页面</router-link></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><router-link :to="{name:'H2'}">H2页面</router-link></code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">2.在HelloWorld.vue加入 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;"><router-view></code>标签，给子模板提供插入位置 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><template></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <div class="hello"></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <h1>{{ msg }}</h1></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <router-view></router-view></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> </div></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> </template></code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">3.在components目录下新建两个组件模板 H1.vue 和 H2.vue 两者内容类似，以下是H1.vue页面内容： <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <template></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <div class="hello"></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <h1>{{ msg }}</h1></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> </div></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"></template></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><script></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> export default {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> data() {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> return {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> msg: 'I am H1 page,Welcome to H1'</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">![clipboard.png](/img/bVbiDh9)</code> </li> <li> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"></script></code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">4.修改router/index.js代码，子路由的写法是在原有的路由配置下加入children字段。 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> routes: [</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> path: '/',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> name: 'HelloWorld',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> component: HelloWorld,</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> children: [{path: '/h1', name: 'H1', component: H1},//子路由的<router-view>必须在HelloWorld.vue中出现</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> {path: '/h2', name: 'H2', component: H2}</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> ]</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> ]</code> </li> </ol> <h2 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 24px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">七、单页面多路由区域操作</h2> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">在一个页面里我们有2个以上 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;"><router-view></code>区域，我们通过配置路由的js文件，来操作这些区域的内容 <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">1.App.vue文件，在 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;"><router-view></code>下面新写了两行 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span style="padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; font-size: 15px; overflow-wrap: break-word !important;"><router-view></code>标签,并加入了些CSS样式 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"><template></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <div id="app"></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <img src="./assets/logo.png"></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <router-link :to="{name:'HelloWorld'}"><h1>H1</h1></router-link></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <router-link :to="{name:'H1'}"><h1>H2</h1></router-link></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <router-view></router-view></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"/></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> <router-view name="right" style="float:right;width:50%;background-color:yellowgreen;height:300px;"/></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> </div></code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"></template></code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">2.需要在路由里配置这三个区域，配置主要是在components字段里进行 <ol class=" list-paddingleft-2" style="list-style-type: none;"> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;">export default new Router({</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> routes: [</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> path: '/',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> name: 'HelloWorld',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> components: {default: HelloWorld,</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> left:H1,//显示H1组件内容'I am H1 page,Welcome to H1'</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> right:H2//显示H2组件内容'I am H2 page,Welcome to H2'</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> },</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> {</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> path: '/h1',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> name: 'H1',</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> components: {default: HelloWorld,</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> left:H2,//显示H2组件内容</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> right:H1//显示H1组件内容</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> }</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> ]</code> </li> <li> <code style="margin-left: -20px; max-width: 100%; box-sizing: border-box; overflow-wrap: normal; display: flex; overflow: initial; line-height: 12px; font-size: 10px; font-family: inherit !important; border: 0px initial initial;"> })</code> </li> </ol> <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;">上边的代码我们编写了两个路径，一个是默认的‘/’，另一个是‘/Hi’.在两个路径下的components里面，我们对三个区域都定义了显示内容。最后页面展示如下图： <p style="margin-top: 15px; margin-bottom: 15px; max-width: 100%; box-sizing: border-box; min-height: 1em; letter-spacing: 0.544px; background-color: #ffffff; font-size: 16px; white-space: pre-line; line-height: 30px; color: #4a4a4a; font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif; text-align: start; overflow-wrap: break-word !important;"><img class="aligncenter" src="http://jvm123.com/wp-content/uploads/2019/09/frc-634ee71726c01f750694c34e2b0b6a83.gif" alt="从头开始学习 vue-router" /> <h2 style="margin-top: 1.5rem; margin-bottom: 1rem; font-size: 24px; max-width: 100%; box-sizing: border-box; letter-spacing: 0.544px; white-space: normal; background-color: #ffffff; color: #159957; line-height: 1.35; text-align: start; overflow-wrap: break-word !important; font-family: Menlo, Monaco, 'Source Code Pro', Consolas, Inconsolata, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Droid Sans Mono', 'Hiragino Sans GB', 微软雅黑, monospace !important;">参考文章</h2> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li> vue-router实现单页面路由原理 </li> <li> Vue.js——vue-router 60分钟快速入门 </li> <li> 技术胖的Vue-router视频教程 </li> <li> vue中 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; font-size: 16px; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span class="" style="color: #4a4a4a; font-size: 15px; padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; line-height: 22px; overflow-wrap: break-word !important;">$router</code>以及 <code class="" style="max-width: 100%; box-sizing: border-box; background: #f3f1f1; color: #585858; font-size: 16px; line-height: 18px; overflow-wrap: break-word !important; font-family: consolas, menlo, courier, monospace, 'Microsoft Yahei'!important; border-width: 0px !important; border-style: initial !important; border-color: initial !important;"><span class="" style="color: #4a4a4a; font-size: 15px; padding-right: 2px; padding-left: 2px; max-width: 100%; box-sizing: border-box; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: inline-block; line-height: 22px; overflow-wrap: break-word !important;">$route</code>的使用 </li> <li> Vue2.0 探索之路——vue-router入门教程和总结 </li> <li> vue-router 2.0一些区别 </li> </ul> <section class="" style="white-space: normal; max-width: 100%; box-sizing: border-box; color: #333333; font-family: -apple-system-font, system-ui, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 17px; font-variant-ligatures: normal; letter-spacing: 0.544px; orphans: 2; text-align: justify; widows: 2; background-color: #ffffff; overflow-wrap: break-word !important;"> <section class="" style="margin-top: 10px; margin-bottom: 10px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important;"> <section class="" style="padding: 10px; max-width: 100%; box-sizing: border-box; display: inline-block; width: 668px; box-shadow: #e2e2e2 0px 16px 1px -13px; overflow-wrap: break-word !important; border: 1px solid #e2e2e2;"> <section class="" style="max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important;"> <section class="" style="max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important;"> <section class="" style="max-width: 100%; box-sizing: border-box; font-size: 12px; color: #5d5d5d; overflow-wrap: break-word !important;"> 【本文作者】 浪里行舟：硕士研究生，专注于前端。个人公众号：「前端工匠」，致力于打造适合初中级工程师能够快速吸收的一系列优质文章 </section> </section> </section> </section> </section> </section>  本文转载自: <a href="https://mp.weixin.qq.com/s?src=11×tamp=1569402109&ver=1873&signature=h1fer5-tAom6fVSfT6vuHo5ejrjN8rr2Di0MBdBYarVugRuEIkPjQfqqvWP*ckIwPRm5B4WFgUy3-t1CKg1RckJ-LpcUHuVs47j55wWbqepxywpbSpsA9yhm6g*Z2yOm&new=1" target="_blank" rel="nofollow noreferrer noopener">前端大全微信</a>

分类：js/jquery 前端笔记转载 vue
标签：前端前端技术 vue vue教程 vue-router vue-cli vuex

预览更多

2019-09-25 17:15:24.0

最详细的VUEX教程

<h1>最详细的Vuex教程</h1> <h2>什么是Vuex？</h2> vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。引入Vuex（前提是已经用Vue脚手架工具构建好项目） 1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。 <pre><code>npm install vuex --save </code></pre> 要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。 2、新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。 <pre><code>import Vue from 'vue'; import Vuex from 'vuex'; </code></pre> 3、使用我们vuex，引入之后用Vue.use进行引用。 <pre><code>Vue.use(Vuex); </code></pre> 通过这三步的操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。 4、在main.js 中引入新建的vuex文件 <pre><code>import storeConfig from './vuex/store' </code></pre> 5、再然后 , 在实例化 Vue对象时加入 store 对象 : <pre><code>new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App } }) </code></pre> <h2>初出茅庐来个Demo</h2> 1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件。 <pre><code>const state = { count:1 } </code></pre> 2、用export default 封装代码，让外部可以引用。 <pre><code>export default new Vuex.Store({ state }); </code></pre> 3、新建一个vue的模板，位置在components文件夹下，名字叫count.vue。在模板中我们引入我们刚建的store.js文件，并在模板中用{{$store.state.count}}输出count 的值。 <pre><code><template> <div> <h2>{{msg}}</h2> <hr/> <h3>{{$store.state.count}}</h3> </div> </template> <script> import store from '@/vuex/store' export default{ data(){ return{ msg:'Hello Vuex', } }, store } </script> </code></pre> 4、在store.js文件中加入两个改变state的方法。 <pre><code>const mutations={ add(state){ state.count+=1; }, reduce(state){ state.count-=1; } } </code></pre> 这里的mutations是固定的写法，意思是改变的，所以你先不用着急，只知道我们要改变state的数值的方法，必须写在mutations里就可以了。 5、在count.vue模板中加入两个按钮，并调用mutations中的方法。 <pre><code><div> <button @click="$store.commit('add')">+</button> <button @click="$store.commit('reduce')">-</button> </div> </code></pre> 这样进行预览就可以实现对vuex中的count进行加减了。 <h2>state访问状态对象</h2> const state ，这个就是我们说的访问状态对象，它就是我们SPA（单页应用程序）中的共享值。学习状态对象赋值给内部对象，也就是把stroe.js中的值，赋值给我们模板里data中的值。有三种赋值方式 <h3>一、通过computed的计算属性直接赋值</h3> computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。 <pre><code>computed:{ count(){ return this.$store.state.count; } } </code></pre> 这里需要注意的是return this.$store.state.count这一句，一定要写this，要不你会找不到$store的。这种写法很好理解，但是写起来是比较麻烦的，那我们来看看第二种写法。 <h3>二、通过mapState的对象来赋值</h3> 我们首先要用import引入mapState。 <pre><code>import {mapState} from 'vuex'; </code></pre> 然后还在computed计算属性里写如下代码： <pre><code>computed:mapState({ count:state=>state.count //理解为传入state对象，修改state.count属性 }) </code></pre> 这里我们使用ES6的箭头函数来给count赋值。 <h3>三、通过mapState的数组来赋值</h3> <pre><code>computed:mapState(["count"]) </code></pre> 这个算是最简单的写法了，在实际项目开发当中也经常这样使用。 Mutations修改状态（$store.commit( )） Vuex提供了commit方法来修改状态，我们粘贴出Demo示例代码内容，简单回顾一下，我们在button上的修改方法。 <pre><code><button @click="$store.commit('add')">+</button> <button @click="$store.commit('reduce')">-</button> </code></pre> store.js文件： <pre><code>const mutations={ add(state){ state.count+=1; }, reduce(state){ state.count-=1; } } </code></pre> 传值：这只是一个最简单的修改状态的操作，在实际项目中我们常常需要在修改状态时传值。比如上边的例子，是我们每次只加1，而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数，并在commit的时候传递就就可以了。我们来看具体代码：现在store.js文件里给add方法加上一个参数n。 <pre><code>const mutations={ add(state,n){ state.count+=n; }, reduce(state){ state.count-=1; } } </code></pre> 在Count.vue里修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10. <pre><code> <button @click="$store.commit('add',10)">+</button> <button @click="$store.commit('reduce')">-</button> </code></pre> <h2>模板获取Mutations方法</h2> 实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。例如：@click=”reduce” 就和没引用vuex插件一样。要达到这种写法，只需要简单的两部就可以了： 1、在模板count.vue里用import 引入我们的mapMutations： <pre><code>import { mapState,mapMutations } from 'vuex'; </code></pre> 2、在模板的<script>标签里添加methods属性，并加入mapMutations <pre><code> methods:mapMutations([ 'add','reduce' ]), </code></pre> 通过上边两部，我们已经可以在模板中直接使用我们的reduce或者add方法了，就像下面这样。 <pre><code><button @click="reduce">-</button> </code></pre> <h2>getters计算过滤操作</h2> getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。 <h3>getters基本用法：</h3> 比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100.我们首先要在store.js里用const声明我们的getters属性。 <pre><code>const getters = { count:function(state){ return state.count +=100; } } </code></pre> 写好了gettters之后，我们还需要在Vuex.Store()里引入，由于之前我们已经引入了state和mutations，所以引入里有三个引入属性。代码如下， <pre><code>export default new Vuex.Store({ state,mutations,getters }) </code></pre> 在store.js里的配置算是完成了，我们需要到模板页对computed进行配置。在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，所以要对上节课写的computed属性进行一个改造。改造时我们使用ES6中的展开运算符”…”。 <pre><code>computed:{ ...mapState(["count"]), count(){ return this.$store.getters.count; } }, </code></pre> 需要注意的是，你写了这个配置后，在每次count 的值发生变化的时候，都会进行加100的操作。 <h3>用mapGetters简化模板写法</h3> 我们都知道state和mutations都有map的引用方法把我们模板中的编码进行简化，我们的getters也是有的，我们来看一下代码。首先用import引入我们的mapGetters <pre><code>import { mapState,mapMutations,mapGetters } from 'vuex'; </code></pre> 在computed属性中加入mapGetters <pre><code>...mapGetters(["count"]) </code></pre> <h2> actions异步修改状态</h2> actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了，如果你不懂自己去百度查一下吧。 <h3>在store.js中声明actions</h3> actions是可以调用Mutations里的方法的，我们还是继续在上节课的代码基础上进行学习，在actions里调用add和reduce两个方法。 <pre><code>const actions ={ addAction(context){ context.commit('add',10) }, reduceAction({commit}){ commit('reduce') } } </code></pre> 在actions里写了两个方法addAction和reduceAction，在方法体里，我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。 ontext：上下文对象，这里你可以理解称store本身。 {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。 <h3>模板中的使用</h3> 我们需要在count.vue模板中编写代码，让actions生效。我们先复制两个以前有的按钮，并改成我们的actions里的方法名，分别是：addAction和reduceAction。 <pre><code> <button @click="addAction">+</button> <button @click="reduceAction">-</button> </code></pre> 改造一下我们的methods方法，首先还是用扩展运算符把mapMutations和mapActions加入。 <pre><code>methods:{ ...mapMutations([ 'add','reduce' ]), ...mapActions(['addAction','reduceAction']) }, </code></pre> 你还要记得用import把我们的mapActions引入才可以使用。 <h3>增加异步检验</h3> 我们现在看的效果和我们用Mutations作的一模一样，肯定有的小伙伴会好奇，那actions有什么用，我们为了演示actions的异步功能，我们增加一个计时器（setTimeOut）延迟执行。在addAction里使用setTimeOut进行延迟执行。 <pre><code>setTimeOut(()=>{context.commit(reduce)},3000); console.log('我比reduce提前执行'); </code></pre> 我们可以看到在控制台先打印出了‘我比reduce提前执行’这句话。 <h2>module模块组</h2> 随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。那今天我们就学习一下module：状态管理器的模块组操作。 <h3>声明模块组：</h3> 在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下: <pre><code>const moduleA={ state,mutations,getters,actions } </code></pre> 声明好后，我们需要修改原来 Vuex.Stroe里的值： <pre><code>export default new Vuex.Store({ modules:{a:moduleA} }) </code></pre> <h3>在模板中使用</h3> 现在我们要在模板中使用count状态，要用插值的形式写入。 <pre><code><h3>{{$store.state.a.count}}</h3> </code></pre> 如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下： <pre><code>computed:{ count(){ return this.$store.state.a.count; } },</code></pre> 本文转载自:https://www.jianshu.com/p/2269e4db9de9

分类：开发笔记前端笔记转载 vue
标签：前端前端技术 vue vue教程 vue-cli vuex

预览更多

2019-09-25 16:55:36.0

vuex 探索之路

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 <h1>1.安装</h1> <h2>1.1 直接下载 / CDN 引用安装</h2> https://unpkg.com/vuex Unpkg.com 提供了基于 NPM 的 CDN 链接。以上的链接会一直指向 NPM 上发布的最新版本。您也可以通过 https://unpkg.com/vuex@2.0.0 这样的方式指定特定的版本。在 Vue 之后引入 vuex 会进行自动安装： <pre><code><script src="/path/to/vue.js"></script><script src="/path/to/vuex.js"></script> </code></pre> <h2>1.2 NPM安装</h2> 运行node执行如下代码安装vuex <pre><code>npm install vuex </code></pre> <h1>2. 为什么使用VUEX？</h1> 首先VUE崇尚组件开发，对于一个网站或者Web App来说组件与组件之间必定存在着业务关系。比如这样的业务场景，即：购物车。这个对于现在的人来说最为熟悉，那么操作购物车的场景也是如此，一个商品的列表中把自己喜欢的商品添加到购物车中。那么对于程序而言，商品列表就是一个组件，购物车是另一个组件。从一个组件中把数据添加给另一个组件就是VUE中最常见的组件之间通信的例子（兄弟组件，或者说同级组件）。对于VUE和React而言，父组件与孩子组件之间通信最为简单，使用props就可以。反之也不难，通过传递事件也可以完成。在没有VUEX之前，那么兄弟组件之间通信相对较为麻烦，VUE提出采用一个空的BUS组件来完成。BUS组件就好比兄弟组件的桥梁。这种方式在维护比较小的工程时，可以一试，效果也不错。但是对于较大的项目来说，这种BUS组件就不止一个了，那么组件与组件之间的维护就变得越来越难。尤其对于VUE、React这种单向数据流的框架。这里再详细介绍一下单向数据流。 <h2>2.1 什么是单向数据流？</h2> 下面一个图就能很清楚的显示出单向数据流的理念： <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 473px;"> <div></div> <div class="image-view" data-width="1280" data-height="866"><img class="aligncenter" src="http://jvm123.com/wp-content/uploads/2019/09/frc-17e0dbc96408efd4ac5287bbdc794b90.png" alt="11.vuex 探索之路11.vuex 探索之路1.安装2. 为什么使用VUEX？3.核心概念4 项目结构"></div> </div> <div class="image-caption"></div> </div> 对于一个组件来说这种理念是非常好的，view通过action改变数据的state，view在根据state来更新，一切都那么自然，那么和谐。但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏： <ul> <li>多个视图依赖于同一状态。</li> <li>来自不同视图的行为需要变更同一状态。</li> </ul> 对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。 <h2>2.2 VUEX的诞生</h2> 为了解决上述带来的问题，我们试想为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者出发行为！另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。 <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 551px;"> <div></div> <div class="image-view" data-width="701" data-height="551"><img class="aligncenter" src="http://jvm123.com/wp-content/uploads/2019/09/frc-d504ca5a64e1ee29f6d4678db41f31ac.png" alt="11.vuex 探索之路11.vuex 探索之路1.安装2. 为什么使用VUEX？3.核心概念4 项目结构"></div> </div> <div class="image-caption">vuex</div> </div> <h2>2.3 什么情况下我应该使用 Vuex？</h2> 虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：Flux 架构就像眼镜：您自会知道什么时候需要它。 <h1>3.核心概念</h1> 在上述描述中，已经很清楚了讲解了什么是VUEX，为什么要使用VUEX，而且上述还提到了，要想使用VUEX就要清楚它独有的一些概念。 <h2>3.1 state 单一状态树</h2> Vuex 使用 单一状态树 —— 是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。单状态树和模块化并不冲突 —— 在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。 <h3>3.1.1 在 Vue 组件中获得 Vuex 状态</h3> 那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态： <pre><code>// 创建一个 Counter 组件 var Counter = { template: "<div>{{ count }}</div>", computed: { count: function() { return store.state.count; } } }; </code></pre> 每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。然而，这种模式导致组件依赖的全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。 Vuex 通过 store 选项，提供了一种机制将状态从根组件『注入』到每一个子组件中（需调用 Vue.use(Vuex)）： <pre><code>var app = new Vue({ el: '#app', // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 store: store, components: { Counter: Counter }, template: ' <div class="app"> <counter></counter> </div> ' }); </code></pre> 通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现： <pre><code>var Counter = { template: "<div>{{ count }}</div>", computed: { count: function() { return this.$store.state.count; } } }; </code></pre> <h3>3.1.2 mapState 辅助函数</h3> 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性时会显得有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键： <pre><code>// 在单独构建的版本中辅助函数为 Vuex.mapState var Vuex = require('vuex'); var Counter = { computed: Vuex.mapState({ // 箭头函数可使代码更简练 count: function count(state) { return state.count; }, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 countPlusLocalState: function(state) { return state.count + this.localCount; } }) }; </code></pre> 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。 <pre><code>computed: mapState([ // 映射 this.count 为 store.state.count 'count' ]) </code></pre> <h3>3.1.3 组件仍然保有局部状态</h3> 使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。 <h2>3.2 Getters</h2> 有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数： <pre><code>var counter = { computed: { doneTodosCount: function() { return this.$store.state.todos.filter(function (todo) { return todo.done; }).length; } } }; </code></pre> 如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它 —— 无论哪种方式都不是很理想。 Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。Getters 接受 state 作为其第一个参数： <pre><code>var store = new Vuex.Store({ state: { todos: [{ id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }] }, getters: { doneTodos: function(state) { return state.todos.filter(function (todo) { return todo.done; }); } } }); </code></pre> Getters 会暴露为 store.getters 对象： <pre><code>store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }] </code></pre> Getters 也可以接受其他 getters 作为第二个参数： <pre><code>var store = new Vuex.Store({ state: { todos: [{ id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }] }, getters: { doneTodos: function(state) { return state.todos.filter(function (todo) { return todo.done; }); }, doneTodosCount: function(state, getters) {//通过getters参数获取当前的getters return getters.doneTodos.length; } } store.getters.doneTodosCount // -> 1 </code></pre> 我们可以很容易地在任何组件中使用它： <pre><code>computed: { doneTodosCount:function { return this.$store.getters.doneTodosCount } } </code></pre> <h3>3.2.1 mapGetters 辅助函数</h3> mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性： <pre><code>var Vuex = require('vuex'); export default { computed: Vuex.mapGetters(['doneTodosCount', 'anotherGetter'])) } } </code></pre> 如果你想将一个 getter 属性另取一个名字，使用对象形式： <pre><code>mapGetters({ // 映射 this.doneCount 为 store.getters.doneTodosCount doneCount: 'doneTodosCount' }) </code></pre> <h2>3.3 Mutations</h2> 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数： <pre><code>var store = new Vuex.Store({ state: { count: 1 }, mutations: { increment: function(state) { // 变更状态 state.count++; } } }); </code></pre> 你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法： <pre><code>store.commit('increment') </code></pre> <h3>3.3.1 参数的传递</h3> 你可以向 store.commit 传入额外的参数，即 mutation 的载荷（playload）： <pre><code>mutations: { increment :function(state, n) { state.count += n } } //在action中调用mutation的时候 store.commit('increment', 10) </code></pre> 在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读： <pre><code>// ... mutations: { increment:function(state, payload) { state.count += payload.amount } } //在action中调用mutation的时候 store.commit('increment', { amount: 10 }) </code></pre> <h3>3.3.2 对象风格的提交方式</h3> 提交 mutation 的另一种方式是直接使用包含 type 属性的对象： <pre><code>store.commit({ type: 'increment', amount: 10 }) </code></pre> 当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变： <pre><code>mutations: { increment (state, payload) { state.count += payload.amount } } </code></pre> <h3>3.3.3 mutation 必须是同步函数</h3> 一条重要的原则就是要记住 mutation 必须是同步函数。为什么？请参考下面的例子： <pre><code>mutations: { someMutation (state) { api.callAsyncMethod(() => { state.count++ }) } } </code></pre> 现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用 —— 实质上任何在回调函数中进行的的状态的改变都是不可追踪的。 <h3>3.3.4 在组件中提交 Mutations</h3> 你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。 <h2>3.4 Actions</h2> Action 类似于 mutation，不同在于： <ul> <li>Action 提交的是 mutation，而不是直接变更状态。</li> <li>Action 可以包含任意异步操作。</li> </ul> 让我们来注册一个简单的 action： <pre><code>var store = new Vuex.Store({ state: { count: 0 }, mutations: { increment: function(state) { state.count++; } }, actions: { increment: function(store) { store.commit('increment'); } } }); </code></pre> ** Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象 ** ，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。 <blockquote>当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。</blockquote> 实践中，我们会经常会用到 ES2015 的参数解构来简化代码（特别是我们需要调用 commit 很多次的时候）： <pre><code>actions: { increment ({ commit }) { commit('increment') } } //上述代码等价于 actions: { increment: function(context) { var commit = context.commit; commit('increment'); } } </code></pre> <h3>3.4.1 分发 Action</h3> Action 通过 store.dispatch 方法触发： <pre><code>store.dispatch('increment') </code></pre> 乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作： <pre><code>actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } </code></pre> Actions 支持同样的载荷方式和对象方式进行分发： // 以载荷形式分发 <pre><code>store.dispatch('incrementAsync', { amount: 10 }) // 以对象形式分发 store.dispatch({ type: 'incrementAsync', amount: 10 }) </code></pre> 来看一个更加实际的购物车示例，涉及到调用异步 API 和分发多重 mutations： <pre><code>actions: { checkout ({ commit, state }, products) { // 把当前购物车的物品备份起来 const savedCartItems = [...state.cart.added] // 发出结账请求，然后乐观地清空购物车 commit(types.CHECKOUT_REQUEST) // 购物 API 接受一个成功回调和一个失败回调 shop.buyProducts( products, // 成功操作 () => commit(types.CHECKOUT_SUCCESS), // 失败操作 () => commit(types.CHECKOUT_FAILURE, savedCartItems) ) } } //不习惯看es6语法的可以看下面 actions: { checkout: function checkout(context, products) { var commit = context.commit, var state = context.state; // 把当前购物车的物品备份起来 var savedCartItems = [].concat(_toConsumableArray(state.cart.added)); // 发出结账请求，然后乐观地清空购物车 commit(types.CHECKOUT_REQUEST); // 购物 API 接受一个成功回调和一个失败回调 shop.buyProducts(products, // 成功操作 function () { return commit(types.CHECKOUT_SUCCESS); }, // 失败操作 function () { return commit(types.CHECKOUT_FAILURE, savedCartItems); }); } } </code></pre> 注意我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。 <h3>3.4.2 在组件中分发 Action</h3> 你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）： <h3>3.4.3 组合 Actions</h3> Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？第一件事你需要清楚的是 store.dispatch 的返回的是被触发的 action 函数的返回值，因此你可以在 action 中返回 Promise： <pre><code>actions: { actionA ({ commit }) { return new Promise((resolve, reject) => { setTimeout(() => { commit('someMutation') resolve() }, 1000) }) } } </code></pre> 现在你可以： <pre><code>store.dispatch('actionA').then(() => { // ... }) </code></pre> 在另外一个 action 中也可以： <pre><code>actions: { // ... actionB ({ dispatch, commit }) { return dispatch('actionA').then(() => { commit('someOtherMutation') }) } } </code></pre> <h2>3.5 Modules</h2> 使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割： <pre><code>var moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } var moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } var store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态 </code></pre> <h3>3.5.1 模块的局部状态</h3> 对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态。 <pre><code>const moduleA = { state: { count: 0 }, mutations: { increment: (state) { // state 模块的局部状态 state.count++ } }, getters: { doubleCount (state) { return state.count * 2 } } } </code></pre> 同样，对于模块内部的 action，context.state 是局部状态，根节点的状态是 <pre><code>const moduleA = { // ... actions: { incrementIfOdd ({ state, commit }) { if (state.count % 2 === 1) { commit('increment') } } } } 对于模块内部的 getter，根节点状态会作为第三个参数： const moduleA = { // ... getters: { sumWithRootCount (state, getters, rootState) { return state.count + rootState.count } } } </code></pre> <h3>3.5.2 命名空间</h3> 模块内部的 action、mutation、和 getter 现在仍然注册在全局命名空间——这样保证了多个模块能够响应同一 mutation 或 action。你可以通过添加前缀或后缀的方式隔离各模块，以避免名称冲突。你也可能希望写出一个可复用的模块，其使用环境不可控。例如，我们想创建一个 todos 模块： <pre><code>// types.js // 定义 getter、action、和 mutation 的名称为常量，以模块名 `todos` 为前缀 export const DONE_COUNT = 'todos/DONE_COUNT' export const FETCH_ALL = 'todos/FETCH_ALL' export const TOGGLE_DONE = 'todos/TOGGLE_DONE' // modules/todos.js import * as types from '../types' // 使用添加了前缀的名称定义 getter、action 和 mutation const todosModule = { state: { todos: [] }, getters: { [types.DONE_COUNT] (state) { // ... } }, actions: { [types.FETCH_ALL] (context, payload) { // ... } }, mutations: { [types.TOGGLE_DONE] (state, payload) { // ... } } } </code></pre> <h3>3.5.3 模块动态注册</h3> 在 store 创建之后，你可以使用 store.registerModule 方法注册模块： <pre><code>store.registerModule('myModule', { // ... }) </code></pre> 模块的状态将是 store.state.myModule。模块动态注册功能可以让其他 Vue 插件为了应用的 store 附加新模块，以此来分割 Vuex 的状态管理。例如，vuex-router-sync 插件可以集成 vue-router 与 vuex，管理动态模块的路由状态。你也可以使用 **store.unregisterModule(moduleName) **动态地卸载模块。 <blockquote>注意，你不能使用此方法卸载静态模块（在创建 store 时声明的模块）。</blockquote> <h1>4 项目结构</h1> Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则： <ul> <li>应用层级的状态应该集中到单个 store 对象中。</li> <li>提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。</li> <li>异步逻辑都应该封装到 action 里面。</li> </ul> 只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation、和 getters 分割到单独的文件。对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例： ├── index.html ├── main.js ├── api │ └── ... # 抽取出API请求 ├── components │ ├── App.vue │ └── ... └── store ├── index.js # 我们组装模块并导出 store 的地方 ├── actions.js # 根级别的 action ├── mutations.js # 根级别的 mutation └── modules ├── cart.js # 购物车模块 └── products.js # 产品模块本文转载自:https://www.jianshu.com/p/326ec86aae7f

分类：js/jquery 前端笔记转载 vue
标签：vuex vue 前端技术前端

预览更多

2019-09-25 16:45:18.0

我从未见过如此简洁易懂的Vue教程

<h1>我从未见过如此简洁易懂的Vue教程</h1> 这是一篇长文，按照我自己的逻辑重新整理一下,包含所有Vue的基础知识点。但是我更建议你先简略的阅读官方的文档，因为本文具有一定的阅读门槛，同时我也竭尽所能把这门槛降到最低，同样你也可以把本文作为快速回忆教程。 <blockquote>发挥100%的专注力，调动体内所有的热情，你将做到很多令人惊叹的事情</blockquote> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 371px;"> <div></div> <div class="image-view" data-width="1600" data-height="850"><img class="aligncenter" src="http://jvm123.com/wp-content/uploads/2019/09/frc-2f45e4e1c5b3e7ec3aa385704e1cbc55.png" alt="我从未见过如此简洁易懂的Vue教程我从未见过如此简洁易懂的Vue教程我从未见过如此简洁易懂的Vue教程根 vue 实例组件 Component 构造器生命周期绑定计算属性$watchClass 与 Style 绑定条件渲染列表渲染对象v-for方法与事件处理"></div> </div> <div class="image-caption"></div> </div> <h3>什么是MVVM ？</h3> 对比以前的<code>mvc</code>或者<code>mvp</code>，就是把<code>C</code>或者<code>p</code>替换成<code>vm</code>。 <code>vm</code>就是上图，请仔细看一些细节，<code>vm</code>监听<code>DOM</code>，当数据改变的时候，<code>vm</code>会去自动更新视图。 <h3>面向未来的组件系统</h3> 实现了一些未来的<code>w3c</code>规范（暂不赘述） <ul> <li>Web 组件规范</li> <li>Slot API</li> </ul> <h1>根 vue 实例</h1> <pre><code class="javascript">let viewModel = new Vue({ // 包含数据、模板、挂载元素、方法、生命周期钩子等选项 }) </code></pre> Hello Wrold 例子 <pre><code class="html"> <div id="app"> Hello {{ name }}! </div> </code></pre> <pre><code class="javascript">// 这是我们的 Model var model = { name: 'Vue.js' } // 创建一个 Vue 实例或 "viewModel" // 它连接 View 与 Model var viewModel = new Vue({ el: '#app', data: model }) </code></pre> <h1>组件 Component 构造器</h1> <code>vue.extend()</code>返回的只是一个构造器，我们需要通过<code>vue.extend()</code>的返回值和<code>new</code>关键字创建实例。当我们注册为组件的时候，内部就已经帮我们创建好了实例。 Tip：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 <pre><code class="html"><div id="app"> <v-footer></v-footer>  </div> </code></pre> <pre><code class="javascript">let Footer = vue.extend({ template: '<div>我是页脚组件</div>' }) // 注册为全局组件 Vue.component('v-footer', MyComponent) // 创建根实例 new Vue({ el: '#app' }) </code></pre> <h1>生命周期</h1> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 1633px;"> <div></div> <div class="image-view" data-width="1200" data-height="2800"><img class="aligncenter" src="http://jvm123.com/wp-content/uploads/2019/09/frc-e51ea5589a9f43e5492e09c950d26c48.png" alt="我从未见过如此简洁易懂的Vue教程我从未见过如此简洁易懂的Vue教程我从未见过如此简洁易懂的Vue教程根 vue 实例组件 Component 构造器生命周期绑定计算属性$watchClass 与 Style 绑定条件渲染列表渲染对象v-for方法与事件处理"></div> </div> <div class="image-caption"></div> </div> 上图的就是<code>ViewModel</code>的生命周期，仔细的看其实并不难。目前先了解一下。在传统软件工程中，特别是QT类桌面端软件，都有软件的生命周期，还有比如<code>Android</code>的生命周期，<code>React</code>的生命周期。目前的前端趋势正在向此方面靠近。 流程大致像这样 <pre><code>created()->beforeCompile()->compiled()->ready() ->attached()->detached()->beforeDestroy()->destroyed() </code></pre> 更详细的介绍，请点这里查看API文档 <h1>绑定</h1> 简单的理解就是模板字符串功能，放心的在任何你想用的地方去用，假如错了<code>vue</code>会给你提示。 定界符都是可以修改的 <pre><code class="javascript">// 模板定界符 Vue.config.delimiters = ['{{', '}}'] // html模板定界符 Vue.config.unsafeDelimiters = ["{{{", "}}}"] </code></pre> <h2>数据的绑定</h2> <pre><code class="html">消息: {{ msg }}  他将永不会改变: {{* msg }}  <div>{{{ raw_html }}}</div>  <div id="item-{{ id }}"></div>  </code></pre> <h2>表达的绑定</h2> 不可使用，<code>var</code>/<code>let</code>关键字声明变量，也不能使用<code>if</code>/<code>for</code>流程控制。 <pre><code class="javascript">{{ number + 1 }} // 做简单的运算 {{ ok ? 'YES' : 'NO' }} // 三元表达式 {{ message.split('').reverse().join('') }} // 调用该对象上的方法 </code></pre> <h2>过滤器</h2> 对数据进行相应的处理，<code>message</code>为<code>第一个参数</code>、<code>filter</code>为<code>要执行的函数</code>。 <pre><code class="javascript">{{ message | filter }} {{ message | filterA | filterB }} // filterB(filterA(message)) {{ message | filterA 'arg1' arg2 }} // arg2是一个表达式（假设是1+2） filterA(message,arg1,3) </code></pre> <h2>指令</h2> 当其表达式的值改变时把某些特殊的行为应用到 DOM 上。 <pre><code class="html">Hello!  <a v-bind:href="url"></a>  <a v-on:click="doSomething">  <a v-bind:href.literal="/a/b/c"></a>  </code></pre> <h3>v-bind 缩写</h3> <pre><code class="html"> <a v-bind:href="url"></a>  <a :href="url"></a> </code></pre> <pre><code class="html"> <a v-on:click="doSomething"></a>  <a @click="doSomething"></a> </code></pre> <h1>计算属性</h1> <pre><code><div id="example"> a={{ a }}, b={{ b }} </div> </code></pre> <pre><code class="javascript">var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // 一个计算属性的 getter b: function () { // `this` 指向 vm 实例 return this.a + 1 } } }) </code></pre> <h2>给计算属性设置setter</h2> <pre><code class="javascript">computed: { fullname: { get: function() { return this.firstName + ' ' + this.lastName }, set: function() { let names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } </code></pre> <h1>$watch</h1> 通常更优的做法是使用<code>computed</code>计算属性 <pre><code class="html"><div id="app">{{ fullname }}</div> </code></pre> <pre><code class="javascript">let vm = new Vue({ data: { firstName: 'C', lastName: 'O', fullName: 'CO' } }) vm.$watch('firstname', funciton(val){ this.fullname = val + ' ' + this.lastName }) vm.$watch('lastname', funciton(val){ this.fullname = this.firstName + ' ' + val }) // 等价于 let vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function(){ return this.firstName + ' ' + this.lastName } } }) </code></pre> <h1>Class 与 Style 绑定</h1> vue特意增强了他们，支持对象和数组绑定 <h2>Class 对象绑定</h2> <pre><code><div class="static" :class="{ 'class-a': isA , 'class-b': isB}"></div> data: { isA: true, isB: false } <div class="static" :class="classObjcet"></div> data: { classObject: { 'class-a': true 'class-b': false } } //渲染之后 <div class="static class-a"></div> </code></pre> <h2>Class 数组语法</h2> <pre><code><div :class="[classA,classB]"></div> data: { classA: 'class-a' classB: 'class-b' } // 渲染为 <div class="class-a class-b"></div> </code></pre> <pre><code><div :class="[classA, isB? classB : '']"></div> // 始终添加classA对应的类名，根据isB的值确认是否添加classB对应的值。 // 在1.0.19+之后，为了更明了的写法，支持数组里面嵌套对象语法 <div :class="[classA, {classB: isB, classC: isC}]"></div> </code></pre> <h2>Style 对象语法</h2> CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）,自动添加浏览器的前缀。 <pre><code><div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 } </code></pre> <pre><code><div :style="styleObject"></div> data = { styleObject: { color: 'red', fontSize: '13px' } } </code></pre> <h2>Style 数组语法</h2> <pre><code><div :style="[styleObjectA,styleObjectB]"></div> data = { styleObjectA: { fontSize: '15px' } } </code></pre> <h1>条件渲染</h1> ** Tip: v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。** <h2>v-if</h2> <pre><code><h1 v-if="ok">yes</h1> <h1 v-else>no</h1> <template v-if="ok"> <h1>Title</h1> Paragraph 1 Paragraph 2 </template> </code></pre> <h2>v-show</h2> 不支持 template 元素包裹 <pre><code><h1 v-show="ok">Hello!</h1> // 在组件上不能使用 v-else <custom-component v-show="condition"></custom-component> 这可能也是一个组件 </code></pre> <h2>if 与 show 之间的战争</h2> 如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。 <h1>列表渲染</h1> <pre><code><ul id="list"> <li v-for="item in items"> {{ item.message }} </li> </ul> var vm = new Vue({ el: '#list', data: { items: [ { message: 'Foo' }, { message: 'Bar'} ] } }) </code></pre> 通过<code>$index</code>可以访问索引，且在<code>v-for</code>块内可以访问的到其他属性。 <pre><code><ul id="list"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li> </ul> var vm = new Vue({ el: '#list', data: { parentMessage: 'Parent', items: [ {message: 'Foo'}, {message: 'Bar'} ] } }) </code></pre> 为索引设置一个别名，且 1.0.17+ 之后可以使用 <code>for of</code> <pre><code><div v-for="(key,value) of items"> </div> // 使用一层 template 包裹 <template v-for="item in items"> {{ item.id }} {{ item.content }} </template> </code></pre> <h2>数组变动检测</h2> 以下是vue提供的一些数组上的方法，能触发视图更新。 <ul> <li>push()</li> <li>pop()</li> <li>shift()</li> <li>unshift()</li> <li>splice()</li> <li>sort()</li> <li>reverse()</li> </ul> <h3>替换数组</h3> 当我们使用一些不改变数组本身的方法的时候（纯函数），我们可以直接赋值给自身，虽然替换了原始的数组，但是vue不会重新渲染所有，他会去进行对比。 <h2>track-by</h2> 通过此选项设置参考特征，用特征对比，一样就进行复用 <pre><code>{ items: [ {_uid: '339a99', ... } {_uid: '2r9c92', ... } ] } <div v-for="item in items" track-by="_uid">  </div> // _uid 就说明可以复用 </code></pre> <h2>track-by="$index"</h2> 这样让数据替换高效，此时DOM节点不再映射数组顺序变化，不能同步临时状态。 <code>v-for</code> 包含 <code><input></code>元素或者子组件，要小心使用 <h2>更新问题</h2> vue不能检测下面数组的变化 <ul> <li>直接用索引设置元素，如 vm.items[0] = {}；</li> <li>修改数据的长度，如 vm.items.length = 0。</li> </ul> <pre><code>(1) 解决方法 vm.items.$set(0, {}) (2) 解决方法 vm.items = [] </code></pre> <h1>对象v-for</h1> <pre><code><ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ $key }} : {{ value }} </li> </ul> <div> {{ n }} </div> </code></pre> <h1>方法与事件处理</h1> <pre><code><div id="example"> <button @click="greet">Greet</button> </div> let vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, methods: { greet: function(event) { alert('hello'+this.name+'!') console.log(event.target.tagName) } } }) </code></pre> <pre><code><div id="example"> <button :click="say('hi')">Say Hi</button> <button :click="say('what')">Say What</button> </div> new Vue({ el: '#example', methods: { say: function(msg) { alert(msg) } } }) </code></pre> <h2>事件修饰符</h2> 在事件处理器中经常需要调用<code>event.preventDefault</code> 或 <code>event.stopPropagation</code> <pre><code>// 阻止单击事件冒泡 <a @click.stop="do"></a> // 提交事件不再重载页面 <a @submit.prevent="submit"></a> // 修饰符可以串联 <a @click.stop.prevent="do"></a> // 只有修饰符 <form @submit.prevent></form> </code></pre> <h2>按键修饰符</h2> <ul> <li>enter</li> <li>tab</li> <li>delete</li> <li>esc</li> <li>space</li> <li>up</li> <li>down</li> <li>left</li> <li>right</li> </ul> <pre><code> <input v-on:keyup.13="submit">  <input v-on:keyup.enter="submit">  <input @keyup.enter="submit"> </code></pre> 自定义按键别名 <pre><code> // 可以使用 @keyup.f1 Vue.directive('on').keyCodes.f1 = 112 </code></pre> 本文转载自:https://www.jianshu.com/p/b544091c3d67

分类：js/jquery 前端笔记转载 vue
标签：前端 vue vue教程 vue-cli 前端技术

预览更多

2019-09-25 16:34:45.0

纯css回到顶部和回到首页功能，无任何js代码

使用纯css/html实现回到顶部和回到首页功能，无任何js代码，实现了一个外观不错，鼠标上滚有提示效果的回到顶部和回到首页功能。   源代码如下：   <pre class="wp-block-code"><code><style type="text/css" rel="stylesheet"> .jvm123-home, .jvm123-top { margin: 5px 0; width: 50px; height: 50px; background-size:100% 100% } .jvm123-home { background-image: url("http://jvm123.com/wp-content/uploads/2019/08/home.jpg"); } .jvm123-top { background-image: url("http://jvm123.com/wp-content/uploads/2019/08/top.jpg"); } .jvm123-home:hover { background-image: url("http://jvm123.com/wp-content/uploads/2019/08/home1.jpg"); } .jvm123-top:hover { background-image: url("http://jvm123.com/wp-content/uploads/2019/08/top1.jpg"); } </style> <div style="display:block;z-index: 1000;position: fixed;right: 1px;bottom: 10%;width: 50px;opacity: 0.8;margin-right: 5px;"> <a href="http://jvm123.com"><div class="jvm123-home"> </div></a> <a href="#"><div class="jvm123-top"> </div></a> </div></code></pre>   将这段代码放在html页面的任何<body>标签内的位置，并将首页的连接地址改为自己网站的页面即可。   效果如下所示：   <ul class="wp-block-gallery aligncenter columns-2"><li class="blocks-gallery-item"><figure><img src="http://jvm123.com/wp-content/uploads/2019/08/Screenshot_2019-08-29-00-00-16-903_com.android.browser-473x1024.png" alt="" data-id="922" data-link="http://jvm123.com/screenshot_2019-08-29-00-00-16-903_com-android-browser" class="wp-image-922"/><figcaption>手机端效果</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="http://jvm123.com/wp-content/uploads/2019/08/toTop.jpg" alt="" data-id="925" data-link="http://jvm123.com/2019/08/totop.html/totop" class="wp-image-925"/><figcaption>电脑端效果</figcaption></figure></li></ul>   在线演示： <a href="http://jvm123.com/p/springcloud-doc/index.html" target="_blank" rel="noreferrer noopener" aria-label="（在新窗口打开）">http://jvm123.com/p/springcloud-doc/index.html</a>   <pre class="wp-block-code"><code></code></pre>

分类：js/jquery 前端笔记源码项目分享
标签：回到顶部源码 jquery js css 前端回到顶部回到首页源码分享

预览更多

2019-08-29 00:20:27.0

vue二维码生成工具的使用

<h2>使用说明：</h2>   二维码生成工具地址： <a href="/qr-code/">http://jvm123.com/qr-code/</a>   此工具纯前端生成二维码，可生成一般的文本、网址和邮件地址。   网址二维码在扫描之后，会启动手机浏览器或微信浏览器打开网址；   邮件地址二维码在扫描之后，会启动发邮件的程序。   如果不需要再扫描后自动打开网址，或启动邮箱软件，请使用文本类型生成二维码。   <h2>源码：</h2>   使用了qrcodejs2依赖库，关键源码如下：   完整源码已经在gitee开源，并且采用中国首个开源软件协议： “木兰宽松许可证, 第1版 ”   源码地址： https://gitee.com/yawensilence/vue-qr   <pre class="wp-block-code"><code><template> <div id="qr"> <div > <label> 二维码类型： <input type="radio" value="text" v-model="type"> 文本 <input type="radio" value="web" v-model="type"> 网址 <input type="radio" value="mail" v-model="type"> 邮箱 </label> <label> 请输入内容： <input v-model.trim="str"/> </label> <label> 二维码边长： <input v-model.trim="len" value="140" type="range" max="600" min="80"/> {{len}}px </label> <button @click="doit()">确定生成</button> </div> <div id="qrcode"></div>  </div> </template> <script> import QRCode from 'qrcodejs2' // 引入qrcode export default { name : 'qr', data() { return { type: "text", str: "", len: 100 } }, mounted () { this.type = this.getParam("type"); this.str = this.getParam("str"); this.len = this.getParam("len"); if (this.type === "null") { this.type = "txt"; } if (this.str === "null") { this.str = "这是示例文本"; } if (this.len === "null") { this.len = 140; } this.qr(); }, methods: { qr() { var str = this.str; if (this.type === "web" && !str.startsWith("http")) { str="http://" + str; } if (this.type === "mail" && !str.startsWith("mailto:")) { str="mailto:" + str; } let qrcode = new QRCode('qrcode', { width: this.len, height: this.len, text: str, // 二维码地址 colorDark : "#000", colorLight : "#FFF", }) }, getParam(name){ return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null; }, doit() { window.location.href='index.html?str='+this.str+"&len="+this.len+"&type="+this.type; } } } </script></code></pre>

分类：vue 未分类源码项目分享前端笔记
标签：二维码 vue qrcode

预览更多

2019-08-18 00:45:06.0

Unexpected end of JSON input while parsing near '...","shelljs" 安装vue cli

在使用npm安装 vue cli 的时候，出现以下错误   <pre class="wp-block-code"><code>2339 verbose Windows_NT 10.0.18362 2340 verbose argv "D:\\Program Files\\node-v10.3.0-win-x64\\node.exe" "D:\\Program Files\\node-v10.3.0-win-x64\\node_modules\\npm\\bin\\npm-cli.js" "install" "-g" "@vue/cli" 2341 verbose node v10.3.0 2342 verbose npm v6.1.0 2343 error Unexpected end of JSON input while parsing near '...","shelljs":"^0.7.6"}' 2344 verbose exit [ 1, true ]</code></pre>   <figure class="wp-block-image"><img src="http://jvm123.com/wp-content/uploads/2019/08/vue-ex.jpg" alt="" class="wp-image-715"/></figure>   很可能是上次安装失败的缓存原因，可使用以下代码清除npm缓存，再次尝试安装。   <pre class="wp-block-code"><code>npm cache clean --force</code></pre>

分类：开发笔记前端笔记日常报错 vue
标签：npm vue 日常报错 vue-cli 前端开发

预览更多

2019-08-14 19:34:18.0

Unexpected end of JSON input while parsing near '...","shelljs" 安装vue cli unexpected-npm

vue-cli 2.x 和 @vue/cli 3.x

<h2>安装nodejs</h2>   使用vue前，需要先下载安装nodejs，在官网下载后直接双击安装即可。   安装完毕，可以在命令行输入 npm 进行验证。   npm 是 nodejs 附带的一个软件包管理工具，可以用它来安装项目所需的依赖。例如：安装vue-cli、vuex等。   <pre class="wp-block-code"><code>// 例如： npm i element-ui -S</code></pre>   <h2>安装vue-cli</h2>   vue-cli 是一个快速生成 vue 项目目录结构的工具，可通过以下命令安装：   <pre class="wp-block-code"><code>npm install -g vue-cli // 加-g是安装到全局 </code></pre>   如果需要指定软件的版本，可用以下命令：   <pre class="wp-block-code"><code>npm i -g @vue/cli@3.0.0-beta.6</code></pre>   vue-cli 2.x 和 @vue/cli 3.x 使用的方式不同，下面分别介绍：   <h2>vue-cli</h2>   1 使用webpack创建项目   <pre class="wp-block-code"><code>vue init webpack my-project</code></pre>   根据提示，选择或填写项目基本的信息，最后会生成项目的目录 my-project。   <div class="wp-block-image"><figure class="aligncenter"><img src="http://jvm123.com/wp-content/uploads/2019/08/vue-cli-1.x-1024x490.jpg" alt="" class="wp-image-681"/><figcaption>vue-cli 1.x 创建项目</figcaption></figure></div>   2 进入这个目录，执行以下命令安装 package.json 中指定的依赖   <pre class="wp-block-code"><code>npm install</code></pre>   如果还需要额外的依赖，则可通过以下命令安装：   <pre class="wp-block-code"><code>npm install -s vuex // 安装 vuex</code></pre>   3 运行项目使用以下命令   <pre class="wp-block-code"><code>npm run dev</code></pre>   4 构建打包项目   <pre class="wp-block-code"><code>npm run build</code></pre>   打包后，会生成 dist 文件夹，文件夹会有 index.html 文件，将此文件夹中的内容放在 nginx 的 html 目录下，则可以通过 nginx 访问，即网站应用已经发布完成。   <h2>@vue/cli 3</h2>   如果安装 vue cli 的版本是3.0 以上的，则可通过以下步骤开发   1 创建项目   <pre class="wp-block-code"><code>vue create my-project</code></pre>   2 进入这个目录，执行以下命令安装 package.json 中指定的依赖   <pre class="wp-block-code"><code>npm install</code></pre>   如果还需要额外的依赖，则可通过以下命令安装：   <pre class="wp-block-code"><code>npm install -s vuex // 安装 vuex</code></pre>   3 运行项目使用以下命令   <pre class="wp-block-code"><code>npm run serve</code></pre>   4 构建打包项目   <pre class="wp-block-code"><code>npm run build</code></pre>   打包后，会生成 dist 文件夹，文件夹会有 index.html 文件，将此文件夹中的内容放在 nginx 的 html 目录下，则可以通过 nginx 访问，即网站应用已经发布完成。

分类：前端笔记 vue
标签：npm vue nginx vue-cli

预览更多

2019-08-13 22:55:15.0

前端笔记 相关博客-Java技术分享站

从头开始学习Vuex

从头开始学习 vue-router

最详细的VUEX教程

vuex 探索之路

我从未见过如此简洁易懂的Vue教程

纯css回到顶部和回到首页功能，无任何js代码

vue二维码生成工具的使用

Unexpected end of JSON input while parsing near '...","shelljs" 安装vue cli

vue-cli 2.x 和 @vue/cli 3.x

前端笔记相关博客-Java技术分享站