关于vue-router的一些理解

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}} 或者

五：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目录下的静态资源不会被解析，是真正的静态资源