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中。