千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）

p14 vue高频面试题-2

Vue如何实现单页面应用？

通常url的组成部分有：协议名、域名、端口号、路径、参数、哈希值，当哈希值改变，页面不会发生跳转，单页面应用就是利用这一点，给window注册onhashchange事件，当哈希值改变时通过location.hash就能获得相应的哈希值，然后就能跳到相应的页面

hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则

history原理：利用h5的history中新增的两个api pushState()和replaceState()和一个事件的onpopstate监听URL的变化

$router和$route的区别？

$router是用来操作路由的，是VueRouter的实例，可以跳转页面，使用push、replace等跳转方法可以实现页面的跳转，其中push方法是可以跳转并且还可以回退的，replace方法可以跳转但是不能回退，因为replace方法会把跳转前的地址清楚掉，导致回退不了。

$route是用来获取路由信息参数的，它是路由信息的一个对象，里面包含一些基本信息，有name、meta、path、hash、query、params、fullPath、matched等。

两者实现的东西完全不一样的。

Vue中怎么定义自定义过滤器（vue3不支持）？

用filter来定义过滤器，过滤器分为全局和局部过滤器，过滤器就是一个普通的函数，来对数据进行处理，可以传递参数，当有局部和全局两个名称相同的过滤器时，以就近原则进行调用，也就是局部过滤器优先于全局过滤器。

过滤器例子 {{ data | formatTime}}左边过滤的变量，右边为过滤器的名字

全局定义过滤器：

Vue.filter('formatTime',(val, format) => {

     return moment(val).format(format)

   })

局部定义过滤器：

filters: {

formatTime(val, format) {

      return moment(val).format(format)

     }

    }