Vue-Router 与 Vuex 总结

1、Vue-Router 的懒加载如何实现

【】使用箭头函数+ import 动态加载（常用）

const List = () => import('@/components/list.vue')
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})

【】使用箭头函数+ require 动态加载

const router = new Router({
  routes: [
   {
     path: '/list',
     component: resolve => require(['@/components/list'], resolve)
   }
  ]
})

2、路由的 hash 和 history 模式的区别

【】hash 模式是开发中默认的模式。hash 值会出现在 URL 里面，但是不会出现在 HTTP 请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面。hash 路由被称为是前端路由，已经成为SPA（单页面应用）的标配

【】原理： hash模式的主要原理就是onhashchange()事件：

window.onhashchange = function(event){
	console.log(event.oldURL, event.newURL);
	let hash = location.hash.slice(1);
}

【】使用 onhashchange() 事件的好处就是，在页面的hash值发生变化时，无需向后端发起请求，window就可以监听事件的改变，并按规则加载相应的代码。除此之外，hash值变化对应的URL都会被浏览器记录下来，这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器，但是页面的hash值和对应的URL关联起来了。hash 只能修改 # 后面的部分，所以只能跳转到与当前 url 同文档的 url

【】history 模式的URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。缺点是在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来

【】history api 可以分为两大部分，切换历史状态和修改历史状态：

• 切换历史状态： 包括forward()、back()、go()三个方法，对应浏览器的前进，后退，跳转操作
• 修改历史状态：pushState() 和 replaceState() 方法，这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。如果要做到改变url但又不刷新页面的效果，就需要前端用上这两个API

3、$route 和$router 的区别

【】$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数

【】$router 是“路由实例”对象包括了路由的跳转方法，钩子函数等

4、如何定义动态路由

【】param 方式

• 配置路由格式：/router/:id
• 传递后形成的路径：/router/123

【】query 方式

• 配置路由格式：/router，也就是普通配置
• 传递后形成的路径：/route?id=123

5、Vue-Router 导航守卫

【】全局路由钩子：

• router.beforeEach 全局前置守卫 进入路由之前 （判断是否登录）
• router.beforeResolve 全局解析守卫（2.5.0+）在 beforeRouteEnter 调用之后调用
• router.afterEach 全局后置钩子 进入路由之后（页面回到顶部）

【】单个路由独享钩子

• beforeEnter 如果不想全局配置守卫的话，可以为某些路由单独配置守卫

export default [    
    {        
        path: '/',        
        name: 'login',        
        component: login,        
        beforeEnter: (to, from, next) => {          
            console.log('即将进入登录页面')          
            next()        
        }    
    }
]

【】组件内钩子

• beforeRouteEnter∶ 进入组件前触发，此时还访问不到this，因为该守卫执行前组件实例还没有被创建，需要传一个回调给 next 来访问
• beforeRouteUpdate∶ 当前地址改变并且该组件被复用时触发
• beforeRouteLeave∶ 离开组件被调用

6、完整的路由导航解析流程（包括其他生命周期）

【】触发进入其他路由

【】调用要离开路由的组件守卫 beforeRouteLeave

【】调用全局前置守卫∶ beforeEach

【】在重用的组件里调用 beforeRouteUpdate

【】调用路由独享守卫 beforeEnter

【】解析异步路由组件

【】在将要进入的路由组件中调用 beforeRouteEnter

【】调用全局解析守卫 beforeResolve

【】导航被确认

【】调用全局后置钩子的 afterEach 钩子

【】触发DOM更新（beforeCreate、created、beforeMount、deactivated、mounted、activated）

【】执行beforeRouteEnter 守卫中传给 next 的回调函数

7、Vue-router 跳转和 location.href 有什么区别

【】使用 location.href= /url 来跳转，简单方便，但是刷新了页面

【】使用 history.pushState( /url ) ，无刷新页面，静态跳转

【】引进 router ，然后使用 router.push( /url ) 来跳转，使用了 diff 算法，实现了按需加载，减少了 dom 的消耗

8、params 和 query 的区别

【】用法：query 要用 path 来引入，params 要用 name 来引入

【】url 地址显示：query 在浏览器地址栏中显示参数，params 则不显示

【】注意：query刷新不会丢失query里面的数据 params刷新会丢失 params里面的数据

9、各模块在核心流程中的主要功能

    

【】Vue Components∶ Vue组件。HTML页面上，负责接收用户操作等交互行为，执行 dispatch 方法触发对应 action 进行回应

【】dispatch∶操作行为触发方法，是唯一能执行 action 的方法

【】actions∶ 操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发

【】commit∶状态改变提交操作方法。对 mutation 进行提交，是唯一能执行 mutation 的方法

【】mutations∶状态改变操作方法。是Vuex修改state的唯一推荐方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等

【】state∶ 页面状态管理容器对象

【】getters∶ state对象读取方法