文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue-router相关面试题及答案有哪些

2023-07-05 08:53

关注

这篇文章主要介绍“vue-router相关面试题及答案有哪些”,在日常操作中,相信很多人在vue-router相关面试题及答案有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue-router相关面试题及答案有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

vue-router的原理

在单页面应用中,不同组件之间的切换需要通过前端路由来实现。

前端路由

key是路径,value是组件,用于展示页面内容
2.工作过程:当浏览器的路径改变时,对应的组件就会显示。
vue-router的路由作用:将组件映射到路由, 然后渲染出来

主要就是

路由的hash模式

改变URL的三种方式

优点

缺点

路由的history模式 - 利用H5的history API

优点

缺点

$route和$router有什么区别?

$router是VueRouter的实例对象,表示整个应用的唯一路由器对象。包含了路由跳转的方法、钩子函数等。
$route是当前路由对象,表示本组件的路由规则,每一个路由都会有一个route对象,是一个局部对象。

vue-router参数传递的几种方式,有什么区别?

-描述如何指定跳转的路由如果没有传参可以传参没有要求的值吗
params参数路径/params参数必须要使用name指定路由params是路由的一部分,如果在配置了占位符必须要有
如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。
传递路径上没有的占位符,地址栏上不会显示并且刷新会丢失
query参数路径? key1=val1 & key2=val2....1.可以使用name指定路由
2.可以使用path指定路由
query是拼接在url后面的参数,没有也没关系query不会

vue-router参数丢失的问题

params参数传递的时候,传递了设置占位符接收的参数,地址栏不会显示并且刷新会丢失。

解决办法:可以通过this.$route.params获取参数保存在本地

vue-router有几种钩子函数?具体是什么及执行流程是怎样的?

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

进入组件前的调用的顺序 beforeEach()=>beforeEnter()=>beforeRouteEnter()=>beforeResolve() 这个过程不可以使用this,因为组件实例还没有被创建,所以需要利用next函数

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

vue-router相关面试题及答案有哪些

keep-alive

keep-alive可以实现组件缓存,当组件切换时不会对当前组件进行卸载。

keep-alive标签主要是有include、exclude、max三个属性

两个生命周期activated/deactivated,用来得知当前组件是否处于活跃状态。

keep-alive的原理 缓存管理+特殊的挂载/卸载流程

特殊的卸载/挂载流程:activated/deactivated
缓存管理:LRU(Least Recently Used)最近最少使用是一种淘汰算法

特殊的卸载/挂载流程
由于不能将组件真正的卸载,所以keep-alive是将组件从原容器移动到另外一个假容器中,实现假卸载。挂载的时候从隐藏容器中再搬运到原容器。对应到组件的activateddeactivated生命周期
keepAlive会对内部组件(需要被缓存的)进行打标记

vue-router相关面试题及答案有哪些

缓存策略:最近最少使用

使用Map对象cache来实现对组件的缓存,key是vnode.type值,value为vnode对象,因为组件的vnode对象中存在对组件实例的引用(vnode.component)

到此,关于“vue-router相关面试题及答案有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯