Vue面试考点之Vue-router

时间:2021-6-12 作者:qvyue

1、vue-router路由有几种模式?说说它们的区别?

在vue的路由配置中有mode选项,可以设置为hash和history两种模式

1)hash模式

a、URL路径会出现“#”号字符;

b、hash值不包括在Http请求中,它是交由前端路由处理,所以改变hash值时不会刷新页面,也不会向服务器发送请求;

c、hash值的改变会触发hashchange事件。

d、hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了

2)history模式

使用HTML5的History 对象的pushState() 和 replaceState() 方法来完成 URL 跳转而无须重新加载页面。不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,就需要前端自己配置404页面。

a、整个地址重新加载,可以保存历史记录,方便前进后退

b、依赖H5 API和后台配置,没有后台配置的话,页面刷新时会出现404。

window.history属性指向 History 对象,它表示当前窗口的浏览历史。不支持老旧浏览器。

History 对象主要有两个属性

History.length:当前窗口访问过的网址数量(包括当前网页)。

History.state:History 堆栈最上层的状态值。

History 对象主要方法

History.back():移动到上一个网址,等同于点击浏览器的后退键。对于第一个访问的网址,该方法无效果。

History.forward():移动到下一个网址,等同于点击浏览器的前进键。对于最后一个访问的网址,该方法无效果。

History.go():接受一个整数作为参数,以当前网址为基准,移动到参数指定的网址,比如go(1)相当于forward(),go(-1)相当于back()。如果参数超过实际存在的网址范围,该方法无效果;如果不指定参数,默认参数为0,相当于刷新当前页面。

注意,移动到以前访问过的页面时,页面通常是从浏览器缓存之中加载,而不是重新要求服务器发送新的网页。

History.pushState():用于在历史中添加一条记录。

Vue面试考点之Vue-router

该方法接受三个参数,依次为:

state:一个与添加的记录相关联的状态对象,主要用于popstate事件。该事件触发时,该对象会传入回调函数。也就是说,浏览器会将这个对象序列化以后保留在本地,重新载入这个页面的时候,可以拿到这个对象。如果不需要这个对象,此处可以填null。

title:新页面的标题。但是,现在所有浏览器都忽视这个参数,所以这里可以填空字符串。

url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。如果pushState()方法设置了一个跨域网址,则会报错。

示例:假定当前网址是example.com/1.html,使用pushState()方法在浏览记录(History 对象)中添加一个新记录。

Vue面试考点之Vue-router

添加新记录后,浏览器地址栏立刻显示example.com/2.html,但并不会跳转到2.html,甚至也不会检查2.html是否存在,它只是成为浏览历史中的最新记录。这时,在地址栏输入一个新的地址(比如访问google.com),然后点击了倒退按钮,页面的 URL 将显示2.html;你再点击一次倒退按钮,URL 将显示1.html。

总之,pushState()方法不会触发页面刷新,只是导致 History 对象发生变化,地址栏会有反应。使用该方法之后,就可以用History.state属性读出状态对象。

Vue面试考点之Vue-router

History.replaceState()方法:用来修改 History 对象的当前记录,其他都与pushState()方法一模一样。

假定当前网页是example.com/example.html。

Vue面试考点之Vue-router

pushState() 和 replaceState()这两个方法的作用就是可以将url替换并且不刷新页面,好比挂羊头卖狗肉,http并没有去请求服务器该路径下的资源,一旦刷新就会暴露这个实际不存在的“羊头”,显示404(因为浏览器一旦刷新,就是去真正请求服务器资源)

那么如何去解决history模式下刷新报404的弊端呢,这就需要服务器端做点手脚,将不存在的路径请求重定向到入口文件(index.html)

popstate 事件

pushState方法、replaceState方法,只能导致history对象发生变化,从而改变当前地址栏的 URL,但浏览器不会向后端发送请求,也不会触发popstate事件的执行

只有用户点击浏览器倒退按钮和前进按钮,或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。

history.pushState() 相比于直接修改 hash,存在以下优势:

a、pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL;

b、pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中;

c、pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串;

d、pushState() 可额外设置 title 属性供后续使用。

2、重定向、别名和配置4040页面

重定向也是通过routes配置来完成。从/a重定向到/b:

Vue面试考点之Vue-router

重定向的目标也可以是一个命名的路由:

Vue面试考点之Vue-router

甚至是一个方法,动态返回重定向目标:

Vue面试考点之Vue-router

“重定向”的意思是,当用户访问/a时,URL 将会被替换成/b,然后匹配路由为/b,那么“别名”又是什么呢?

/a的别名是/b,意味着,当用户访问/b时,URL 会保持为/b,但是路由匹配则为/a,就像用户访问/a一样。

Vue面试考点之Vue-router

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。

可以配置path:‘*’实现配置404页面。*代表全匹配 你放在第一个不管地址是什么都会 匹配到了 放在最后一个 前面有的就不会匹配。

3、vue-router中的组件

组件支持用户在具有路由功能的应用中 (点击) 导航。通过to属性指定目标地址,默认渲染成带有正确链接的标签,可以通过配置tag属性生成别的标签。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名(active-class)。active-class是router-link终端属性,用来做选中样式的切换,当router-link标签被点击时将会应用这个样式。

Vue面试考点之Vue-router

组件是一个 functional 组件,渲染路径匹配到的视图组件。渲染的组件还可以内嵌自己的,根据嵌套路径,渲染嵌套组件。

如果设置了名称name,则会渲染对应的路由配置中components下的相应组件。

它也是个组件,所以可以配合和使用。如果两个结合一起用,要确保在内层使用

Vue面试考点之Vue-router

元素作为单个元素/组件的过渡效果。只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在检测过的组件层级中。Vue只有在插入,更新或者移除DOM元素时才会应用过渡效果。

Vue面试考点之Vue-router

组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:

a、fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;

b、fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成之后移除;

c、fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;

d、fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成之后被删除

能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 当组件在内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行。

4、vue-router 传参

1)Params

只能使用name,不能使用path,参数不会显示在路径上,浏览器强制刷新参数会被清空。

Vue面试考点之Vue-router
Vue面试考点之Vue-router

2)Query

参数会显示在路径上,刷新不会被清空,name 可以使用path路径。

Vue面试考点之Vue-router
Vue面试考点之Vue-router

5、vue-router有哪几种导航钩子(导航守卫)?

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

1)全局前置守卫

Vue面试考点之Vue-router

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中

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

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

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

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

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

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

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

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

确保next函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错

Vue面试考点之Vue-router
Vue面试考点之Vue-router

2)全局解析守卫

可以用router.beforeResolve注册一个全局守卫。这和router.beforeEach类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。

3)全局后置钩子

你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受next函数也不会改变导航本身。

Vue面试考点之Vue-router

4)路由独享的守卫

在路由配置上直接定义beforeEnter守卫。

Vue面试考点之Vue-router

5)组件内的守卫

你可以在路由组件内直接定义以下路由导航守卫:

a、beforeRouteEnter

b、beforeRouteUpdate(2.2 新增)

c、beforeRouteLeave

Vue面试考点之Vue-router

6、$route和 $router的区别是什么?

router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。

route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。

7、Vue-Router实现

Vue面试考点之Vue-router
Vue面试考点之Vue-router

8、懒加载的方式

1)在ES6中,按需加载 import() 方法

Vue面试考点之Vue-router

2)Vue的异步组件

Vue面试考点之Vue-router

3)require.ensure

Vue面试考点之Vue-router
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。