【整理分享】一些vue-router相关面试题（附答案解析）-热资讯

本篇文章给大家总结分享一些vue-router的相关面试题（附答案解析），带你梳理基础知识，增强vue-router知识储备，值得收藏，快来看看吧！

(资料图片)

vue-router的原理

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

前端路由

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

主要就是

如何改变URL却不引起页面刷新

如何检测到URL变化了【相关推荐：vuejs视频教程、web前端开发】

路由的hash模式

hash 是 URL 中 #及后面的那部分，#后的url不会发送到服务器，所以改变 URL 中的 hash 部分不会引起页面刷新

window可以监听onhashchange事件变化。当hash变化时，读取#后的内容，根据信息进行路由规则匹配，通过改变 window.location.hash改变页面路由。

改变URL的三种方式

通过浏览器前进后退改变 URL通过标签改变 URL通过window.location改变URL

优点

只需要前端配置路由表, 不需要后端的参与兼容性好, 浏览器都能支持

hash值改变不会向后端发送请求, 完全属于前端路由

缺点

hash值前面需要加#, 不符合url规范,也不美观

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

html5 的history Interface 中新增的pushState()和 replaceState()方法，用来在浏览历史中添加和修改记录，改变页面路径，使URL跳转不会重新加载页面。

类似hashchange 事件的 popstate事件，但 popstate 事件有些不同：只有在做出浏览器的行为才会调用 popState，用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。

优点

符合url地址规范, 不需要#, 使用起来比较美观

缺点

在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState()和 replaceState()方法,需要特定浏览器的支持.

$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提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

全局路由守卫 : 可以有多个根据创建顺序调用。router.beforeEach()全局前置守卫,每次导航时都会触发。router.afterEach()全局后置路由守卫,每次路由跳转完成后。不会接受 next 函数，跳转完成已经进入到组件内了router.beforResolve()全局解析守卫，在路由跳转前，所有组件内守卫和 异步路由组件被解析之后触发，它同样在每次导航时都会触发。解析完成后导航被确定，准备开始跳转。组件内路由守卫beforeRouteEnter()路由进入组件之前调用，该钩子在beforeEach和 beforeEnter之后。此时还没有进入组件，组件实例还没有被创建。所以不能获取组件实例，此时 this 为 undefined，在 beforeCreate生命周期前触发。beforeRouteUpdate()this 已经可用了，所以给 next 传递回调就没有必要了。对一个带有动态参数的路径 /foo/:id,在/foo/1 和/foo/2之间跳转的时候，由于会渲染统一的Foo组件，因此这个组件实例会被复用，这个钩子在这种情况下可以被调用。beforeRouteLeave()离开该组件时被调用,this 已经可用了，所以给 next 传递回调就没有必要了。独享路由守卫beforeEnter()需要在路由配置上定义 beforeEnter 守卫，此守卫只在进入路由时触发，在 beforeEach 之后紧随执行，不会在 params、query 或 hash 改变时触发。

进入组件前的调用的顺序 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 的回调函数，创建好的组件实例会作为回调函数的参数传入。