前端面试(3)

1.怎么定义Vue-router的动态路由？怎么获取传过来的动态参数?
设置:在router目录下的index.js文件中，对path属性加上/:id
获取:使用router对象的params.id 例如 : this.$route.params.id

2.Vue引用虚拟DOM解决什么问题？
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

3.Vue-router有哪几种导航钩子
第一种：是全局导航钩子：

router.beforeEach(to,from,next)

第二种: 组件内的钩子

       beforeRouteEnter(to, from, next) {
          在渲染该组件的对应路由被 confirm 前调用
       },

       beforeRouteUpdate(to, from, next) {
           在当前路由改变，但是依然渲染该组件是调用
       },

       beforeRouteLeave(to, from ,next) {
           导航离开该组件的对应路由时被调用
       }

第三种：单独路由独享钩子

   beforeEnter(to, from, next)

4.用CSS实现元素的垂直居中,都有哪些实现方法?
1、头部和顶部使用相同大小的padding值可以实现居中
2、单行文本可以用line-height实现垂直居中，设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。
3、通过display:flex，align-items: center;或 align-self: center;实现垂直居中
4、使用position、transform实现元素垂直居中
5、使用position结合margin：auto实现垂直居中
6、使用 display :table和 vertical-align 对容器里的文字进行垂直居中, 父元素使用display:table,子元素使用display:table-cell属性来模拟表格，子元素设vertical-align:middle即可垂直居中
7、通过verticle-align:middle实现行内垂直居中
5.介绍一下组件中父子间通信
1.概念：A组件中调用B组件，那么A组件就是父组件，B组件就是子组件
通信方式：
2.父组件向子组件传递数据——使用props
3.子组件向父组件传递数据——使用this.$emit暴露