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