前端面试系列（五）

vue-router

1、vue-router如何响应 路由参数 的变化？

答：a.watch方法中监听

b.beforeRouteUpdate方法中监听

2、完整的 vue-router 导航解析流程

答：a、导航被触发。

b、在失活的组件里调用离开守卫。

c、调用全局的 beforeEach 守卫。

d、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

e、在路由配置里调用 beforeEnter。

f、解析异步路由组件。

g、在被激活的组件里调用 beforeRouteEnter。

h、调用全局的 beforeResole 守卫 (2.5+)。

i、导航被确认。

j、调用全局的 afterEach 钩子。

k、触发 DOM 更新。

l、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

3、vue-router有哪几种导航钩子（ 导航守卫 ）？

答：a、全局守卫： router.beforeEach

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来resolve这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在router-link的 to prop或 router.push中的选项。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError()注册过的回调。

确保要调用 next方法，否则钩子就不会被 resolved。

b、全局解析守卫： router.beforeResolve

c、全局后置钩子： router.afterEach

d、路由独享的守卫： beforeEnter

e、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

4、vue-router的几种实例方法以及参数传递

答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

5、vue-router的动态路由匹配以及使用

答：动态路径匹配：即把某种模式匹配到的所有路由，全都映射到同个组件。使用动态路由参数来实现。

例如，我们有一个 User 组件，对于所有ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在vue-router的路由路径中使用“动态路径参数”(dynamic segment)来达到这个效果。

const User = {

  template: '<div>User</div>'

}

const router = new VueRouter({

  routes: [

    // 动态路径参数 以冒号开头

    { path: '/user/:id', component: User }

  ]
})

这样，像/user/foo和/user/bar都将映射到相同的路由。

一个“路径参数”使用冒号 :标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

在 User 的模板，输出当前用户的 ID：

const User = {

  template: '<div>User {{ $route.params.id }}</div>'

}

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

答：第一步：定义一个能够被 Webpack 自动代码分割的异步组件。

const index = () => import('../page/list/index.vue');

第二步：在路由配置中什么都不需要改变，只需要像往常一样使用 index。

const router = new VueRouter({

  routes: [

    { path: '/index', component: index,name:"index" }

  ]})

第三步：在build/webpack.base.conf.js下的output属性，新增chunkFilename。

output: {

    path: config.build.assetsRoot,

    filename: '[name].js',

    //新增chunFilename属性

    chunkFilename: '[name].js',

    publicPath: process.env.NODE_ENV === 'production'

      ? config.build.assetsPublicPath

      : config.dev.assetsPublicPath
}

7、vue-router路由的两种模式

答：hash模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

history模式：

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

//设置mode属性，设置路由模式

const router = new VueRouter({

  mode: 'history',

  routes: [...]
})

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。