目录
十二、路由
路由的使用Vue-router
-
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面
应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳
转到对应的页面，这就是路由跳转. -
三个单词（route，routes，router）：
-
route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；
-
routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；
-
router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；
-
客户端实例
步骤：
1.下载vue-router.js
2.页面引用
3.创建组件
var login={
template:'<p>登陆组件</p>'
}
var register={
template:'<p>注册组件</p>'
}
4.创建路由规则对象
var routerobj = new VueRouter({
routers:[
{path:'/login',component:login},
{path:'/register',component:register},
]
})
5.将路由规则对象挂载到vue实例上
var vue = new Vue({
el:'#app',
router:routerobj,
})
6.在div中使用
<div id="app">
<a href = "#/login">登录</a>
<a href = "#/register">注册</a>
<router-view></router-view>
</div>
属性
vue-router是vue单页面开发的路由，就是决定页面跳转的！
<router-link> 组件支持用户在具体有路由功能的应用中（点击）导航。通过to属性指定目标地址
属性如下：
1.to
表示目标路由的链接。当被点击后，内部会立刻把to的值传到router-push()
2.replace
设置replace属性的话，当点击时，会调用router.replace()而不是router.push()，所以导航后不会留下history记录，也就是不能回退到上一个页面
3.append
设置append属性后，则在当前路径前添加基路径，例如，我们从 /a导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
4.tag
有时候想要<router-link>渲染成某种标签，例如<li>。于是我们使用tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
5、active-class
设置链接激活时使用的css类名。默认值可以通过路由的构造选项linkActiveClass来全局配置, 默认值为 router-link-active
6、exact
“是否激活”，默认是false 。举个粟子，如果当前的路径是/a 开头的，那么<router-link to="/a"> 也会被设置css类名按照这个规则，<router-link to="/">将会点亮各个路由！想要链接使用"exact匹配模式"，
则使用exact属性：
7、event
声明可以用来触发导航的事件（默认是click）。可以是一个字符串或者是一个包含字符串的数组
8、将"激活时的css类名"应用在外层元素
有时候我们要让"激活的css类名"应用在外层元素，而不是标签本身，那么可以用<router-link>渲染外层元素，包裹着内层的原生<a>标签
9、方法
router-link默认是触发router.push(location)，如果设置replace 则触发router.replace(location)区别是：
- router.push() ：导航跑到不同的URL,这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的url.
- router.replace(): 跟router.push作用是一样的，但是，它不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录.
- router.go(n): 这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.Go(n)
10.hashbang
-
只在 hash 模式下可用
-
将路径格式化为#!开头 : 默认值为true
11.history
启用HTML5 history模式，可以使用pushState和replaceState来管理记录，默认值是false。
路由对象和路由匹配
- 路由对象，即$route会被注入每个组件中，可以利用它进行一些信息的获取，也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。
- 全匹配片段的语法是使用通配符* 如，/user/*any就会匹配到任何以/user为开头的路径，并给params对象中赋值一个属性any
- 动态片段的语法就是使用 : 作为标志。
使用路径名称
在定义路径规则的时候，如果你给它提供了一个name属性，则可以在后续使用这条路径规则的时候，直接引用。
第一种用法: 通过name属性，为一个页面中不同的router-view渲染不同的组件,
<router-view></router-view>
<router-view name="Hello"></router-view>
<router-view name="text"></router-view>
第二种用法： 可以用name传参 使用$route.name获取组件name值
<p>{{$router.name}}</p> //可以获取到渲染进来的组件的name值
<router-view></router-view>
第三种用法: 用于pramas传参的引入 pramas必须用name来引入； query可以用name或者path来引入
var router = new VueRouter({
routes:[{name:'register',path:'/reister/:id/:name',component:register}]
})
<router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
query传参和params传参的使用和区别
1.用法上:
query可以用name或path来引入
params必需要用name来引入，接收参数都是类似的，分别是:
this.$route.query.name和this.$route.params.name
2.地址栏表现形式上:
query：
/login?id=10&name=zs
params：
/login/12/ls
vue-router的嵌套
<router-view>是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>。
<div id="app">
<router-view></router-view>
</div>
const User={
template:`
<div class="user">
<h2> User {{$router.params.id}}</h2>
<router-view></router-view>
</div>`
}
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
const router = new VueRouter({
routes:[
{
path:'/user/:id',
component:User,
children:[
{path:'profile',
component:UserProfile}
]
}
]
})
以 / 开头的嵌套路径会被当作根路径
十三、vue-cli脚手架
vue-cli解释
vue-cli是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。
全局安装
全局安装命令：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
检查版本：
vue --version
升级版本：
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
创建项目
命令行窗口方式
- 进入想创建项目的目录然后执行命令：
vue create hello-world
- 初始化项目:
npm install
- 启动项目:
npm run serve
- 浏览器访问：
http://localhost:8080/
- 项目打包上线：
npm run build
图形界面方式创建
(vue 3.0及以上版本支持)
- 打开ui界面：
vue ui
自动跳转到图形化创建界面
-
点击创建新项目
填写项目名（尽量小写，大写会自动转为小写），选择npm或其他包管理器。 -
选择默认即可
十四、vue的ajax请求
1）vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。
2） axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护
安装axios并引入
1）npm的方式： $ npm install axios -S
2）bower的方式：$ bower install axios
3）cdn的方式：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
基本用法
1）axios([options])
2）axios.get(url[,options]);
传参方式：
（1）通过url传参axios(‘url?key=value&key1=val2’).then();
（2）通过params选项传参 axios(‘url’,{params:{key:value}}).then();
3）axios.post(url,data,[options]);
axios默认发送数据时，数据格式是Request Payload，并非常用的Form Data格式，
所以参数必须要以键值对形式传递，不能以json形式传。
传参方式：
（1）自己拼接为键值对
axios.post(‘url’,‘key=value&key1=value1’).then();
（2）使用transformRequest，在请求发送前将请求数据进行转换
（3）如果使用模块化开发，可以使用qs模块进行转换
简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库
十五、跨域请求
跨域概念
1、跨域
指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
2、同源策略
是指协议，域名，端口都要相同，其中有一个不同都会产生跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
3、跨域问题怎么出现的
开发一些前后端分离的项目，比如使用 SpringBoot + Vue 开发时，后台代码在一台服务器上启动，前台代码在另外一台电脑上启动，此时就会出现问题。
比如：后台 地址为 http://192.168.70.77:8081
前台 地址为 http://192.168.70.88:8080
此时 ip 与 端口号不一致， 不符合同源策略，造成跨域问题。
（axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库）
十六、动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
**示例：**当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：- 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
- 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
- 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
在进入/离开的过渡中，会有 6 个 class 切换
- v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
- v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
- v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
- v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
- v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函 数。
- v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除
注意：
-
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的
<transition>，则 v- 是这些类名的默认前缀。
如果你使用了<transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。 -
-v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线
-
CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
自定义过渡类名
以通过以下 attribute 来自定义过渡类名：
- enter-class
- enter-active-class
- enter-to-class (2.1.8+)
- leave-class
- leave-active-class
- leave-to-class (2.1.8+)
它们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。
十七、性能优化
一、均衡页面加载文件的大小和数量
1、项目中小图片图片转base64，通过工具如webpack进行图片压缩，文件进行压缩混淆等
2、vue-router 懒加载，异步路由
3、第三方依赖按需加载，比如使用element-ui框架，但是里面的组件只用到了其中一部分，可以单独建一个引入element组件的文件，在里面引入我们项目中需要的组件，然后vue.use它
4、通过webpack进行处理，有一个externals属性，可以在里面设置不需要打包的文件，比如可以设置将vue、vue-router、element-ui等等设置进去，打包的时候就不会打包他们，然后将vue、vue-router、element-ui等资源在html中引入
5、可以借助开启gzip压缩文件，减小文件大小；
6、生产环境build时不生成map文件
二、减少等待通过xhr获取数据的时间
1、在redis中添加缓存
2、在并发允许且数据量较多的情况下，分页可以交给后端做，利用数据库进行排序后取出需要的分页内容，这样虽然增加了xhr请求，但是单次请求耗费时间会大大降低；后端分页每次取数据不一定是仅取当前分页的数据，可以一次性取当前页以及当前页的前后各两页的数据，这样用户进行前后页的切换时，不需要重新继续发起xhr请求。
3、一些内容固定的数据（但又需要进行管理），可以将这些数据的获取合并为一个请求，每次刷新只需要取一次
4、提前发起xhr请求：可以在dom渲染完成之前就发起xhr请求，而不是等待dom渲染完成之后才进行。created时，或者beforeRouteEnter时就调用。
三、通过交互，在视觉效果上提升
1、可以通过一些加载loading动画，以及资源加载完成前，可以通过占位符占位的方式，避免渲染时出现空白页，视觉上提升加载速度
2、优先加载当前用户可视区域的内容，其他内容待用户切换tab或者滚动鼠标或者可视区域加载完成后再继续加载
3、图片预渲染，可以在当前页上根据页面上的跳转链接（或者tab页可能的切换），预渲染一些图片
四、善用vue的一些属性
1、v-if与v-show根据具体业务场景适当选取
2、善用kee-alive
五、将项目根据业务和模块，改造为多页面，而不是紧靠单页面支撑
六、代码优化
1、一些前端能做的事情，可以在前端本地做，比如当分页是前端分页的时候，伴随的一些排序、筛选等，也可以由前端实现，节省xhr请求，减少时间损耗
2、通用方法封装为模块，减少代码冗余
3、写一些性能高的代码
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
