Vue2面试题:说一下路由模式hash和history的区别?

    在单页面应用SPA中,路由描述的是URL与视图之间的映射关系,这种映射是单向的,即URL变化引起视图更新(无需刷新页面)。  

    1、hash模式

        原理:

            用 url + #后面的hash值 来模拟一个完整的url,直接刷新页面不会导致浏览器向服务器发出新的请求,路由切换时不会

            当调用$router.push方法,会改变hash值触发hashchange事件,前进到指定的url。vue-router会根据url做路由匹配来修改页面内容,实现路由切换的效果

            改变hash值触发hashchange事件,hashchange事件对象中会记录变化的url。点击浏览器的前进后退,会改变hash值,实现路由切换的效果

        特点:

            地址栏有#,影响美观,直接刷新页面不会报404

2、history模式

        原理:

            用 url + 路径 真正实现一个完整的url,直接刷新页面会导致浏览器向服务器发出新的请求,路由切换时不会

            当调用$router.push方法,会改变路径调用pushState方法,前进到指定的url。vue-router会根据url做路由匹配来修改页面内容,实现路由切换的效果

            改变路径调用pushState方法,pushState方法中会记录变化的url。点击浏览器的前进后退 或者 手动调back、forward、go方法,会触发popstate事件,实现路由切换的效果

        特点:

            地址栏没有#,不影响美观,直接刷新页面会报404,需要后端在Nginx中做代理地址的配置

你可能感兴趣的:(前端面试题合集,前端,javascript,开发语言,vue.js,css)