关于vue-router需要知道的

1：MVVM框架是什么？

• mvvm即Model-View-ViewModel，它的设计原理是基于mvc的
• Model 代表数据模型，负责业务逻辑和数据封装
• View 代表UI组件，负责界面和显示
• ViewModel 监听模型数据的改变和控制视图行为，链接View 层和 Model 层，处理用户交互

2：vue-router是什么？有哪些组件？

• vue-router 是Vue.js 官方的路由管理器
• < router-link> 和 < router-view> 和 < keep-alive>

3:怎么定义vue-router的动态路由，怎么获取传来的值？

• 动态路由的创建，主要是使用 path 属性的过程中，使用动态路径参数，以冒号开头

{
   path:'/details/:id'
   name: 'Details'
   components:Details
}

访问details 目录下的所有文件，如 details/a，details/b 等都会映射到 Deatils 组件上

• 当匹配到/details 下的路由时，参数值会被设置到this.$route.params下，故通过该属性可以获取动态路由传来的值

const param = this.$route.params.id

4：vue-router 有哪几种导航钩子？

1. 全局前置守卫：router.boforeEach(（to, from, next）=> {....} )

   - to：Route，代表要进入的目标，是一个路由对象
   - from：Route，代表当前正要离开的路由，也是一个路由对象
   - next：Function，必须调用的方法，具体执行效果依赖next方法调用的参数
   

   一般用来做一些进入页面的限制。比如未登录就点击访问了只有登陆后才有权限查看的页面——路由拦截

常见使用场景：

1）规定进入路由是否需要权限

{
    path: '/a',
    name: 'a',
    component: A,
    meta : {
       requireAuth: true  // 自定义加入的判断是否需要登录才能访问的参数
    }
}

2）在点击登陆时可用sessionStroage或者vuex记录住登录标识，比如userId
3)使用router.beforeEach()

const router = new VueRouter({})
router.beforeEach((to, from, next) => {
    // 发现是需要认证登录的路由
    if(to.meta.requireAuth) {
       if(store.state.userId) {
          // 可以获取到已登录的userId
          next()
       }else {
          // 设置跳转去登陆页面
          next({path: 'login/'})
       }
    }else {
       // 正常进入就好
       next()
    }
})

其实在这个路由守卫中，只有next( )是放行，其他的诸如next({path: ‘login/’})，next(to)或者next({…to, replace: true})都不是放行，而是：中断当前导航，执行新的导航，再次进入路由守卫，直到执行到了next( )才会放行！！！

next（）用法可看

1）当我在地址栏输入 /home 时，正常路由守卫
beforeEach((to, from, next) => {
    if(to.path === 'home') {
       next('/login')
    }else {
       // 如果要去的地方不是 /home，就放行
       next()
    }
})
2）上述等效于
beforeEach((to, from, next) => {
   beforeEach(('/login', from, next) => {
      next()
   })   
})

2.全局后置钩子

• 后置钩子函数并没有 next 函数，不会改变导航本身

router.afterEach((to, from) => {
   // to do something
})

3. 局部组件导航守卫 beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home，
      beforeEnter: (to, from, next) = {
        // to do somethings
        // 参数与全局守卫参数一样
        }
    }
  ]
})

5：$route 和 $router 的区别是什么？

• router 为 VueRouter 的实例，是一个全局路由对象，包含了路由跳转的方法，钩子函数等
• route 是一个路由信息对象，是个局部对象，包含了当前路由的 path, params, hash, query, fullPath, matched, name等路由信息参数

6：vue-router 实现路由懒加载（动态加载路由）

1：使用懒加载的原因？

• vue这种（spy）单页面应用，如果没有使用到懒加载，webpack打包的文件过大，造成进入首页时，加载的资源过多，时间过长，即使做了loading也不利于用户体验，而运用懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载事件

2：具体方式

• 把不同路由对应的组件分割成不同代码块，只有当路由被访问时才加载对应组件即为路由的懒加载；这样可以加快项目的加载速度，提高效率
• require 是 AMD规范引入方式：component：resolve=>(require([‘需要加载的路由的地址’])，resolve)
• import是es6的一个语法标准： component：() => import("@/components/HelloWorld")

const router = new VueRouter({})
const routers = [
    {
        path: '/',
        name: 'index',
        component: () => import('@/components/Two')
        // component：resolve=>(require(['需要加载的路由的地址'])，resolve)
    }
]