面试题（七）vue路由相关

1. mvvm框架是什么？
答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向数据绑定技术，就说View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。
2.vue-router是什么？它有哪些组件？
答：vue用来写路由的一个插件。router-link、router-view
3.active-class是哪个组件的属性？
答：vue-router模块的router-link组件。children数组用来定义子路由
4.怎么定义 vue-router 的动态路由？怎么获取传过来的值？
答：在router目录下的index.js文件中，对path属性加上 /:id 。使用router对象的params.id。
5.vue-router有哪几种导航钩子？
答：三种
第一种：全局导航钩子：router.beforeEach(to, from, next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子：beforeRouteEnter (to, from, next)
第三种：单独路由独享组件

{
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
}

6.$route 和 $router 的区别
答：$router 是VueRouter的实例，在 script 标签中想要导航到不同的URL，使用 $router.push() 方法。返回上一个历史 history 用 $router.go(-1)
$route为当前router跳转对象。里面可以获取当前路由的name，path，query，params等。
7.vue-router的两种模式
答：hash模式：即地址栏 URL 中的 # 符号；
history模式：window.history对象打印出来可以看到里面提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
8.vue-router实现路由懒加载（动态加载路由）
答：三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。但是这种情况下一个组件生成一个js文件。
第二种：路由懒加载（使用import）
第三种：webpack提供的require.ensure(),vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

const Login = () => import(/* webpackChunkName:"login_home_welcome" */'@/components/Login.vue')
const Home = () => import(/* webpackChunkName:"login_home_welcome" */'@/components/Home.vue')
const Welcome = () => import(/* webpackChunkName:"login_home_welcome" */'@/components/Welcome.vue')