记录今天面试答不上来的题
1、设置两个div，第一个margin-bottom为100px，第二个div设置margin-top为100px,如果给第二个div设置内间距，会发生什么？
首先发生塌陷，所以两个div的间距是100px，然后第二个div设置了内间距为20px，那么第二个div的宽度和高度会从原来的100px变为120px
面试官挖了一个坑，问给两个span设置内间距20，会发生什么？
注意：行内元素是没有内间距的
2、vue-router的hash和history的区别？
hash会在url中自带#，URL的hash URL的hash也就是锚点(#), 本质上是改变href属性.比如(http://www.abc.com/#/hello)hash的值为#/hello，hash虽然出现在url中，但是不会被包括在http请求中，因此改变hash不会重新加载页面
hash模式的原理是设置onhashchange事件进行hash值的监听
history使用时，需要在配置路由规则时加入“mode：‘history’”，这种模式充分利用了H5的history interface新增的pushState和replaceState方法
history常用的改变url的方法：history.go(),history.back(),history.forward()
3、vue-router
vue-router是单页面（SPA）的路径管理器，为什么不用a标签是因为，vue做的都是单页面应用（当项目打包后，会生成dist文件夹，里面存放的是静态资源和index页面），因此a标签是不起作用的
注意：
**单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面**，因此实现单页面前端路由时，vue提供了两种模式：hash和history
*使用路由模块实现页面跳转的方式：*
1、直接修改地址栏
2、用this.$router.push()
3、用标签router-link
如何用router传参：
1、模板里用$route.属性名（留意数据是用route获取而不是router）
2、在标签router-link传参（<router-link :to={} />）
3、在router文件中用冒号的形式传参（比如自己做的京东到家项目中router页面里，path后面加了/:id，意为传递参数id）
vue-router配置子路由：
1、首先设置vue-router标签
````
<router-link :to="{name:'HelloWorld'}">主页</router-link>
<router-link :to="{name:'H1'}">H1页面</router-link>
<router-link :to="{name:'H2'}">H2页面</router-link>
````
2、在父页面里加入vue-view标签给子页面提供插入位置
````
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-view></router-view>
</div>
</template>
````
3、在components文件夹下创建H1和H2的子组件
4、在router文件中添加children字段
````
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children: [{path: '/h1', name: 'H1', component: H1},//子路由的<router-view>必须在HelloWorld.vue中出现
{path: '/h2', name: 'H2', component: H2}
]
}
]
````
5、route和router的区别：
route是路由信息对象，常有属性：params（key/value对象），path（当前路由路径），query（key/value对象，表示url查询参数），hash（当前路由的hash值，不带#），name（当前路由名字）
router常用方法：go,replace,push,back
router.push和router.replace的区别：push会在history栈中添加新的记录，点击返回按钮回跳回之前的页面，replace是替换当前history的记录，点击并不会跳回原来的页面
