VueRouter面试题汇总

1.什么是前端路由？

前端路由是在单页面应用的情况下，通过对每个视图展示形式匹配一个特殊的url来实现所谓的切换效果。不会重新向服务端发送请求，也不会跳转页面。无论是刷新、前进、还是后退，都可以通过特殊url实现。

2.vue-router 路由钩子函数是什么 执行顺序是什么？

全局前置/钩子：beforeEach、beforeResolve、afterEach

路由独享的守卫：beforeEnter

组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 

3.路由跳转的3种方式

1.通过声明式路由导航跳转

<router-link :to="{ name: 'page1', param: {} }">

2.通过name或者path跳转

this.$router.push({ name: "page1", param: {} });

3.配置path，跳转

this.$router.push("/page1");

4.router中的两种路由模式

1.hash模式

location.hash 的值实际就是 URL 中#后面的东西 它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

可以为 hash 的改变添加监听事件

window.addEventListener("hashchange", callback, false);

2.history模式

5.vue-router实现懒加载的方式有哪些

1.在声明路由路径文件里面使用import方式引入组件 () => import(组件文件路径)

2.使用webpack中的require.ensure方法（不太会用）

3.通过组件内部，局部懒加载的方式

components: {
  comp: (resolve) => {
    require([path], resolve);
  }
}

6.Vue-router跳转和location.href有什么区别？

location.href进行页面跳转的时候刷新了页面，主要用于多个页面跳转，不适用于单页面应用

而Vue-router主要是通过history.pushState进行页面跳转，只用于单页面模式下

7. 切换路由时需要保存草稿的功能，怎么实现？

通过keep-alive

<keep-alive>
  <router-link v-if="$route.meta.isCache"></router-link>
</keep-alive>
<router-link v-if="!$route.meta.isCache"></router-link>

[
  {
    path: "/path1",
    name: "name1"
    meta: {
      isCache: true  // 配置是否需要缓存
    }
  }
]

8.vue-router如何响应路由参数的变化?

当从/page/apple => /page/orange 时，

1. 可以用watch方法

// 监听页面切换
watch: {
  "$route.path"() {
    console.log("页面发生了切换");
  }
}

2. 在路由守卫中，页面跳转都会经过路由守卫，故可以在beforeEach中监听，

// 页面跳转前的操作
beforeEach(to, from, next) {
  // 执行路由跳转的逻辑
  doSomething();
}

9.说说vue-router完整的导航解析流程是什么？ 

1. 导航被触发

2. 在即将离开的组件里调用beforeRouteLeave守卫

3. 调用全局前置守卫beforeEach守卫

4. 在重用的组件里调用beforeRouteUpdate守卫 / 调用路由配置的beforeEnter守卫

5. 解析异步路由组件

6. 在被激活的组件里调用beforeRouteEnter

7. 调用全局的beforeResolve守卫

8. 导航被确认

9. 调用全局的 afterEach 钩子

10. 触发DOM更新

11. 用创建好的实例调用 beforeRouteEnter 守卫传给 next 的回调函数。 

10.路由之间跳转方法

组件方式 <router-link>

vue-router中Api方式：$router.push、$router.replace、$router.redirect()

参考链接：
VUE之vue-router常见面试题_vue router面试题-CSDN博客 【vue】vue-Router 常见面试题_vue-router面试题-CSDN博客