vue——路由之动态注册路由、守卫路由、仓库vuex、UI框架

一、动态注册路由

addRoute：动态添加路由，添加一条新的路由记录作为现有路由的子路由。

参数：（父路由记录，{path:....}）

语法：

• 第一种：在router的index.js中添加：router.addRoute("father",{path:...})
• 第二种：在父路由的methods中，this.$router.addRoute({path:...})

二、路由守卫

(一)全局守卫

• 均由router调用

（1）全局前置钩子 router.beforeEach(fn(to,from,next))

• to：要跳转的路由页面的路由信息对象 有to.path to.其他
• from：跳转前的页面的路由信息对象
• next：就是去匹配路由然后加载组件，相当于重定向，next()收尾 不传参(路由) 否则死循环

     匹配一次路由就会执行一次  先执行函数后再跳转页面

     调了next才会去匹配路由跳转页面

     使用场景：导航被触发----一般登录验证

（2）全局解析钩子 router.beforeResolve(fn(to,from,next))

     组件初始化

     next：调用next() 解析成功后渲染组件

（3）全局后置钩子 router.afterEach(fn