vue-router面试题

1、vue-router怎么重定向页面?

答:路由中配置redirect属性

2、vue-router怎么配置404页面?

答:path: '*' 是对的 但是应该放在最后一个

3、切换路由时,需要保存草稿的功能,怎么实现呢?

答:beforeRouteLeave写逻辑

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

答:hash模式:
  1.url路径会出现“#”号字符
  2.hash值不包括在Http请求中,它是交由前端路由处理,所以改变hash值时不会刷新页面,也不会向服务器发送请求,所以这也是单页面应用的必备。
  3.hash值的改变会触发hashchange事件
  4.当我们进行刷新操作,或者直接输入浏览器地址时,hash路由会加载到地址栏对应的页面,而history路由一般就404报错了(刷新是网络请求,没有后端准备时会报错)。

history模式:
  1.
history运用了浏览器的历史记录栈,之前有back,forward,go方法,之后在HTML5中新增了pushState()和replaceState()方法,它们提供了对历史记录进行修改的功能,不过在进行修改时,虽然改变了当前的URL,但是浏览器不会马上向后端发送请求。

  2.history的这种模式需要后台配置支持。比如:当我们进行项目的主页的时候,一切正常,可以访问,但是当我们刷新页面或者直接访问路径的时候就会返回404,那是因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404

  3.hash路由支持低版本的浏览器,而history路由是HTML5新增的API。

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

答:https://www.jianshu.com/p/5528c30f866b

6、说说你对router-link的了解

答:vue-router插件的其中一个组件, 用于跳转路由, 类似于a标签, 它一般也会渲染成a标签, 但是可以通过tag来变更默认渲染元素, 通过to来跳转;demo

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

答:1、使用 watch 监听 2、向 router-view 组件中添加 key  <router-view :key="$route.fullPath"></router-view> $route.fullPath 是完成后解析的URL,包含其查询参数信息和hash完整路径

8、你有看过vue-router的源码吗?说说看

答:https://www.cnblogs.com/caizhenbo/p/7297730.html

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

答:使用scrollBehavior demo

10、在什么场景下会用到嵌套路由?

答:在页面点击不同的选项卡切换不同的路由来展示不同的内容时

11、如何获取路由传过来的参数?

答:如果使用query方式传入的参数使用this.$route.query 接收
  如果使用params方式传入的参数使用this.$router.params接收

12、说说active-class是哪个组件的属性?

答:router-link

13、在vue组件中怎么获取到当前的路由信息?

答:this.$route

14、vur-router怎么重定向?

答:redirect 动态的话在回调里面写逻辑判断

15、怎样动态加载路由?

答:vue-router的addRoutes方法

16、怎么实现路由懒加载呢?

答:一般都用箭头函数的方法 component:()=>import('组件路径')

17、如果让你从零开始写一个vue路由,说说你的思路

答:创建完页面后,在router.js里创建一个路径,(一般刚创建项目时会有Home和About的示例,我都是直接复制一下他们的路由然后再改成自己的),然后在对应的页面中引用

18、说说vue-router完整的导航解析流程是什么?

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

 

19、路由之间是怎么跳转的?有哪些方式?

答:组件导航 router-link router-view 编程导航router.pushr outer.replace router.go

 

20、如果vue-router使用history模式,部署时要注意什么?

答:服务器的404页面需要重定向到index.html

21、route和router有什么区别?

答:router是new vueRouter的实例,route是当前路由的对象

22、vue-router钩子函数有哪些?都有哪些参数?

答:全局的:beforeEach、beforeResolve、afterEach
  路由的:beforeEnter
  组件的:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
  参数:to、from、next;正对不同的钩子函数参数有所差异。

23、vue-router是用来做什么的?它有哪些组件?

答:vue-router路由,通俗来讲主要是来实现页面的跳转,通过设置不同的path,向服务器发送的不同的请求,获取不同的资源。
主要组件:router-view、router-link

 

posted @ 2021-04-27 17:19  菜鸟小何  阅读(2121)  评论(0编辑  收藏  举报