前端常见面试题（九）vue路由
目录：
1，Vue路由的实现原理 ❤
2.SPA 路由history模式上线后刷新404 ❤
3，$route和$router的区别 ❤
4.自定义过滤器详解
5，自定义指令详解
6，assets和static的区别 ❤
一：Vue路由的实现原理
路由这个概念最初是由后端提出来的，在我们没有SPA单页面应用之前，使用的一直都是后端路由，根据不同的路由返回不同的页面，后来随着单页面应用的诞生，开始有了前端路由，实现不刷新但是更新页面的效果
vue-router是专为Vue打造的路由管理工具
1，hash模式
默认模式，通过路径中的hash值来控制路由跳转，不存在兼容问题
2，history模式
H5新增的 history API，相对hash而言，不会显示#号，但是需要服务器端配置
3，abstract模式
支持javascript的所有运行环境，常指Node.js服务器环境
二：SPA 路由history模式上线后刷新404
出现问题：在使用history模式的时候，由于浏览器路径与后端路径类似，所以当刷新页面的时候，浏览器还是会向服务器发送请求，但是由于服务器并没有对应的路由页面，所以会导致404空白
解决方案：在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现后退。
三：$route和$router的区别
1，$route是路由信息对象，包括path、params、hash、query、fullPath、meta、name等路由信息参数，可以通过$route来获取当前路由的各种参数,
pathString保存当前绝对路径信息
paramsObject保存当前的params参数对象
hashString保存当前的hash信息，不带#号，如果没有hash为空字符串
queryObject保存当前的query参数对象
metaObject保存当前路由的源信息
fullPathString保存完成解析后的路径信息，包含hash、query等参数
nameString保存路由name值
2，$router是路由实例对象，包含的是VueRouter实例上的方法以及配置属性，常用于编程式导航；
pushFunction(Object|String)
this.$router.push('/home?tab=all')
this.$router.push({path: '/home', query:{tab:'all'}})
replaceFunction(Object|String)
this.$router.replace('/home?tab=all')
this.$router.replace({path: '/home', query:{tab:'all'}})
goFunction(Number)
this.$router.go(-1)操作history的API进行后退
this.$router.go(1)操作history的API进行前进
四：自定义过滤器详解
1，在Vue1.x的版本中，是有内置过滤器的，而到了2.0以后，废除了内置过滤器，允许我们自定义过滤器
2，自定义过滤器的使用方法
在插值表达式{{}}以及v-bind:指令绑定的属性的冒号内，可以使用自定义过滤器
使用时，在js表达式的结尾使用管道符来指示过滤器
示例： {{date| formatDate}} 或者 <input v-bind:value="date | formatDate" />
五：assets和static/public的区别
在vue-cli工具中，有两个存放静态资源的目录，一个是src目录下的assets，另一个在vue-cli2下是static目录，在vue-cli3下是public目录，那这两个目录的区别是什么呢？
首先需要知道：在*.vue组件中，所有的templates和css都会被vue-html-loader 和 css-loader解析，寻找资源的URL。
assets和static/public的区别
在assets目录下的静态资源会被webpack解析成资源模块依赖，在项目打包的时候会随着项目一起打包
而在static/public目录下的静态资源不会被解析，是真正的静态资源
完结
