我的源码学习之路（12）--- 延展vue-router

嘟嘟雅宁
156 阅读4分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

前言

不甘于平庸又不努力

2023继续！！！

继续列举一下vue-router相关的面试题

active-class 是哪个组件的属性？

image.png

这个属性主要用来实现选中样式的切换的，写法如下

<router-link to="/" active-class="active" exact>home</router-link>

a.router-link-exact-active {
  color: plum;
}

.active {
  font-size: 16px;
  font-weight: bold;
}

image.png

开发时会遇到的问题：

image.png

说说vue-router的两种模式

mode:hash、history、abstract 最常用的就是前两种

this.mode = mode

switch (mode) {
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `invalid mode: ${mode}`)
    }
}

Hash

其工作原理：利用hashchange事件监听hash的变化，就是#后面的东西

缺点：hash是用于做页面定位，若是用来做路由，原锚点公共失效;路径书写不简约；Hash模式传参基于rul,若有复杂的数据会有体积的限制

History

充分利用H5 History中的pushState(current) , replaceState(current)方法，这两个方法用于浏览器的历史记录栈，可以不刷新页面改变url地址

前进和后退都不会请求服务器 靠popstate事件监听

  • History.pushState()用于在浏览器访问历史栈中添加一条记录，该方法不会刷新页面，只会导致History对象发生变化，地址栏会发生变化。使用该方法后，可以用History.state读出状态对象
  • History。replaceState()用于修改History对象的当前记录
  • popState事件。只有用户点击浏览器前进和后退，或使用脚本调用history.back()、history.forward()、history.go()方法才会触发popstate事件。

两者的区别和相同点

  • 相同点

    • 都是VueRouter的模式配置选项。

    • 都可以用作SPA（单页面应用）的实现，实现前端路由，不向服务器发起请求，动态渲染页面

  • 不同
    • Hash需要#，history更简约
    • hash通过window对象监听hashchange事件，History通过popstate()

route 和 router 的区别是什么

  • Route是获取路由的 可以获取当前路由的信息

  • router是操作路由的 有多种方法push replace 等

vue-router钩子函数有哪些？都有哪些参数？有哪些

全局守卫

  • beforeEach(to, from, next)
    • 定义的全局的前置钩子函数。页面加载前执行。to:即将进入的目标路由；form:当前导航要离开的路由；next:一定要调用这个方法来resolve方法。（必须写的方法：next()）
    • 方法：可以判断有没有token，继而跳转哪个页面；可以判断根据权限标识进入的某些路由

image.png

  • afterEach(to, from, next)
    • 定义的全局的后置守卫。页面加载后执行

路由独享的守卫（路由内的钩子）：beforeEnter(to,from,next)

image.png

组件内的守卫

  • beforeRouteEnter：可以知道是从哪一个页面到页面的。

  • beforeRouteUpdate

  • beforeRouteLeave：可以清除当前组件的定时器；当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转；保存相关内容到缓存里

 beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`

  }

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

location.href会刷新页面

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

keep-alive

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

路由守卫可以监听到

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

  • 1.完整的导航解析流程 导航被触发。
  • 2.在失活的组件里调用 beforeRouteLeave 守卫。
  • 3.调用全局的 beforeEach 守卫。
  • 4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  • 5.在路由配置里调用 beforeEnter。
  • 6.解析异步路由组件。
  • 7.在被激活的组件里调用 beforeRouteEnter。
  • 8.调用全局的 beforeResolve 守卫 (2.5+)。
  • 9.导航被确认。
  • 10.调用全局的 afterEach 钩子。
  • 11.触发 DOM 更新。
  • 12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

vue-router实现路由懒加载（ 动态加载路由 ）的方式有哪些?

懒加载：用的时候加载，不用不加载 方式有三

  1. import引入组件

image.png 2. vue异步组件:require 3. webpack的require，ensure() 4.

切换到新路由时，页面要滚动到顶部或保持原先的滚动位置怎么做呢？

滚动到顶部：在new Router()的时候，配置scrollBehavior(to, from, savedPosition) {return { x: 0, y: 0 }}

后记

本文仅作为自己一个阅读记录，具体还是要看大佬们的文章

准备写写vuex

下一篇：我的源码学习之路（13）---延展vuex

avatar
文章
阅读
粉丝