路由：
根据用户请求地址的不同返回不同的数据/页面
前端路由：
根据用户请求的地址来渲染不同的页面，前端路由不会经过后端，而是根据哈希值得变化来进行页面数据的渲染，一般情况下
前端路由都用做单页面开发(SPA)。 不利于SEO优化
前端路由分为2个 一个是hashRouter(onhashChange) history路由 (h5 historyAPI)
优点：用户体验更好一些
后端路由：
主要是用来做接口
routes:路由配置的一些规则 它是一个数组 数组中的每一个对象都是一个路由的配置项
routes（路由）配置项、
new VueRouter({
routes:[
{
path:
component
children
meta
props
name
}
]
})
重点！！！！
<router-view></router-view>一定要写
<template>
<div id="app">
<router-view></router-view>
<!-- <a href="#/home">首页</a>
<a href="#/list">列表</a>
<a href="#/order">订单</a>
<a href="#/mine">我的</a> -->
<div v-if="this.$route.meta.flag">
<router-link to="/home">首页</router-link>
<router-link to="/list">列表</router-link>
<router-link to="/order">订单</router-link>
<router-link to="/mine">我的</router-link>
</div>
</div>
</template>
<script>
export default {
name:"App",
}
</script>
<style>
.router-link-active{
color:#c33;
font-weight: 900;
}
</style>
当路由配置成功以后VueRouter会提供2个内置组件用来做组件的显示
当前组件就是用来做路由组件展示的
当前组件用来做路由的跳转 属性：
to:指定跳转的路径
tag:将router-link渲染成指定的标签(这个吊啊！)
也是重点！！！！
auth：true 需要校验（就是要跳转到登录注册页面）
auth：false（不需要校验）
路由跳转的方式：
1、a标签 <a href="#/home"></a>
2、router-link
3、编程式导航
路由的配置项：
path:路由匹配的路径
component:当path的路由匹配成功以后就会显示对于的组件
children:路由嵌套 可以理解成它就是一个小型的routes 值是一个数组 数组中的每一个对象就是一个二级路由的配置项
二级路由的配置项属性和一级的路由配置项属性是一致。注意path不要去加/
name:命名路由
meta:路由元信息 每个路由身上携带的信息
props:路由解耦
路由传值：
动态路由
1、在定义路由的时候通过/:属性 /：属性来定义传递的属性
2、在路由跳转的时候通过/值 /值将数据传递到对应得组件中去
3、在对应得组件内部通过this.$route.params进行数据的接收
query传值
1、query传值其实就是get提交数据的形式，进行url的数据拼接
2、接收的时候通过this.$route.query进行接收
路由解耦:（针对动态路由）
1、在定义路由的时候通过/:属性 /：属性来定义传递的属性
2、在定义路由的时候需要配置一个属性props:true
3、在路由跳转的时候通过/值 /值将数据传递到对应得组件中去
4、在对应的组件内部通过props进行数据的接收
二者区别：
前者路由跳转的时候参数是必须传递的，如果不传递则相对应得页面不会显示
而后者的参数是非必须传递的
路由的形式：
1、hash路由 url路径上带# 不需要后端配置的
2、history路由 url路径上不带# 使用的时候需要后端的配置
编程式导航
this.$router.back() 后退
this.$router.forward() 前进
this.$router.push() 跳转
this.$router.go() 指定跳转
this.$router.replace() 替换
$route与$router的区别
$route是当前路由的一些信息 例如跳转的路径以及携带的参数等
$router路由的实例化对象.里面有我们需要的一些方法 例如编程式导航的跳转等等
路由守卫：
路由钩子函数
解释：路由跳转前后的一些验证
全局守卫
beforeEach
局部守卫
beforeRouteEnter 进入路由前的守卫
在当前路由钩子函数中是访问不到this的
1、登陆的验证
2、热力图
3、权限校验
4、消息通知
beforeRouteUpdate 路由更新时的守卫
当路由发生改变的时候，而当前组件没有经历创建和销毁的时候我们就需要用到了beforeRouteUpdate.
除此之外我们还可以通过watch来监听$route的变化也能达到同样的效果
beforeRouteLeave 路由离开时的守卫
1、未支付
2、未保存
3、答题系统
4、退出登陆
路由守卫的参数
to:到哪个路由
from:从哪个路由来
next：进入路由
(to和from就相当于一个$route,这里面都是当前路由的信息)
路由懒加载
1、异步组件的方式
2、ES6import方式
一、懒加载
也叫延迟加载或者按需加载，即在需要的时候进行加载，
二、为什么要使用懒加载
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
简单的说就是：进入首页不用一次加载过多资源造成用时过长
三、非懒加载的路由配置项
四、vue异步组件实现路由懒加载
使用vue的异步组件，可以实现路由的懒加载
{
path: ‘/home’,
name: ‘home’,
component: resolve => require([’…/components/home’], resolve)
}
六、chunkFilename
chunkFilename：chunkname就是未被列在entry中，但有些场景需要被打包出来的文件命名配置。比如按需加载（异步）模块的时候，这样的文件是没有被列在entry中的使用CommonJS的方式异步加载模块
chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js’)
构建项目
vue create myapp
"myapp"是随便起的
脚手架的使用
cnpm install @vue/cli -g 全局安装
创建项目
vue create 项目名称
面试题：
前端路由和后端路由的区别？
客户端渲染和服务端渲染的区别
单页面开发与多页面开发的区别
vue使用插件的流程
1、引入vue
2、引入插件
3、通过vue.use来使用插件