前端面试题（九）

1.简述每个周期具体适合哪些场景？

一般 created / beforeMount / mounted 皆可。

2.created和mounted的区别

created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted：再模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

3.怎么定义 vue-router 的动态路由？怎么获取传过来的值？

在router目录下的index.js文件中，对path属性加上 /:id 。使用router对象的params.id。

4.$route 和 $router 的区别

$router 是VueRouter的实例，在 script 标签中想要导航到不同的URL，使用 $router.push() 方法。返回上一个历史 history 用 $router.go(-1)
$route为当前router跳转对象。里面可以获取当前路由的name，path，query，params等。

5.vue-router的两种模式

hash模式：即地址栏 URL 中的 # 符号；
history模式：window.history对象打印出来可以看到里面提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

6.vue-router实现路由懒加载（动态加载路由）

三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。但是这种情况下一个组件生成一个js文件。
第二种：路由懒加载（使用import）
第三种：webpack提供的require.ensure(),vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。