前端面试题九@杨志刚

Vue路由的实现原理

这里指的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。 换句话说,vue-router就是WebApp的链接路径管理系统。

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用

1、hash模式:原理是onhashchange事件,url都会被浏览器记录下来,只能改变#后面的url片段

2、history模式:根据history api中的pushState,replaceState两个方法。

通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面

SPA路由history模式上线后刷新404

解决方案:

1.  先去下载一个web程序安装平台(下载地址

2.下载安装完成之后打开IIS可以看到我们安装的web程序安装平台

IISweb程序安装平台

3.找到你配置的网站,双击打开web程序安装平台,并在它产品选项下的服务器中找到URL重写工具,进行安装

URL安装

4.当安装完成之后返回你的网站主界面,就会发现多出一个URL重写选项

URL

5.双击打开,点击添加规则

添加规则

6.点击添加规则后,并选择入站规则的空白规则

6.名称随便写一下自己能区分就行,这里我就写为chuizi,在设置匹配URL时,将使用选项改为 ‘通配符’ ,重要的步骤:将模式中写“*”,就是数学中的星号*

匹配设置

7.接着设置条件选项,点击添加,在选择输入字符串是否时:选择不是文件,然后确定

设置条件

8.接着就是设置操作中的操作属性,在里面写你打包后的index.html路径,因为你放入的是dist文件夹所以我们要在inde.html 前加上 /

设置操作属性

$router和$route的区别

1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。

2.route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等

我们可以从vue devtools中看到每个路由对象的不同

$router对象是全局路由的实例,是router构造方法的实例,他包含了所有的路由,包含了许多关键的对象和属性。

$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含name,path,params,query对象等。

自定义过滤器详解

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,

或者在创建 Vue 实例之前全局定义过滤器:

当全局过滤器和局部过滤器重名时,会采用局部过滤器。

自定义指令详解

有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

1、bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。

2、inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。

3、update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。

4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

5、unbind:只调用一次,指令与元素解绑时调用。


assets和static的区别

相同点:资源在html中使用,都是可以的。

不同点:

使assets下面的资源,在js中使用的话,路径要经过webpack中file-loader编译,路径不能直接写。assets中的文件会经过webpack打包,重新编译,但在动态绑定中,assets路径的图片会加载失败,因为webpack使用的是commenJS规范,必须使用require才可以::src="assetsURL"

static中的文件,不会经过编译。项目在经过打包后,会生成dist文件夹,static中的文件只是复制一遍而已。简单来说,static中建议放一些外部第三方,自己的放到assets,别人的放到static中。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 13,266评论 1 52
  • Vue路由的实现原理 路由这个概念最初是由后端提出来的,在我们没有SPA单页面应用之前,使用的一直都是后端路由,根...
    郝晨光阅读 5,893评论 0 19
  • vue是什么? vue是构建数据驱动的web界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现...
    九四年的风阅读 12,780评论 2 131
  • 第一章 Vue概述 what? Vue是实现UI层的渐进式js框架,核心库关注视图层,简单的ui构建,复杂的路由控...
    fastwe阅读 4,079评论 0 0
  • 去年底,我有幸参与了一场沃顿北京校友会与宾大沃顿中国中心举办的「Another Perspective: Desi...
    苏浩Shawn阅读 4,645评论 0 2