html5 jq做电脑网站站内推广的方法和工具

1.单页应用程序是指所有功能都在一个html页面上

单页面应用程序，之所以开发效率高，性能好，应用体验好，最大的原因就是：页面按需更新。

2.Vue中的路由

路径和组件的映射关系

Vue中的路由插件：VueRouter，掌握VueRouter的基本使用步骤

VueRouter的作用：修改地址栏路径的时候，切换显示匹配的组件。

3..vue结尾的文件分为2类

页面组件：src/views文件夹，页面组件，用于页面展示，配合路由使用

复用组件：src/components文件夹，复用组件，用于展示数据，常用于页面的复用

4.路由的封装抽离

所有的路由配置放置在main.js中不合适，通常把路由模块抽离出来单独放在一个文件中，有利于维护。

5.vue-router提供了一个全局组件<router-link>用于取代<a>标签

因为如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！

router-link-active：用于模糊匹配（常用）

router-link-exact-active：用于精确匹配

6.在进行路由跳转的时候传递参数

分为 查询参数传参 和 动态路由传参

7.两种路由跳转方式

7-1）路径跳转

this.$router.push({

        path: '路由路径'

})

7-2）命名路由跳转

{ name: ''路由名", path: '/path/xxx', component:XXX }

8.缓存组件

原因：当路由被跳转后，原来所看到的组件就被销毁了（会执行组件内的beforeDestroy和destroyed生命周期钩子），重新路由到该组件后，该组件有会被重新创建（会执行组件内的beforeCreate，created，beforeMount，Mounted生命周期钩子）

解决方法：利用keep-alive把原来的组件给缓存下来，keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。好处就是在组建切换的时候把切换出去的组件保留在内存中，防止重复渲染DOM，目的就是提高用户体验。

9.Vuex

Vuex就是一个插件，可以帮我们管理Vue通用的数据（多组件共享的数据）。例如：购物车数据， 个人信息数据

注意，并不是所有的场景都适合使用Vuex，只有在必要的时候才使用vuex。

10.vuex中的几个部分

state：存放数据

mutations：同步修改数据的方法

actions：异步执行的方法

getters：从state中筛选出符合条件的一些数据，并且这些数据是依赖state的，此时会用到getters

modules：如果把所有的状态都放在state中，当项目变得越来越大的时候，vuex会变得越来越难维护，因此把vuex中的数据进一步分为多个模块来管理。