Skip to content

VueRouter用过么,怎么理解

  1. Vue Router是Vue.js的官方路由。它与Vue.js核心深度集成,让用Vue.js构建单页应用变得轻而易举。
  2. 核心概念的名字和作用:router-linkrouter-view嵌套路由Hash模式History模式导航守卫懒加载() => import()
  3. 常见追问:
    1. Hash模式History模式的区别?
      • 一个用的Hash(基于URL的hash锚点部分来实现路由)

      优缺点

      优点:不刷新页面实现路由跳转

      缺点:SEO不友好

      一个用的History API(基于HTML5 history API来实现路由,还可以使用 pushStatereplaceState 方法,使得路由变化不会导致页面的刷新)

      优缺点

      优点:后端可以将所有前端路由渲染到同一个页面

      缺点:如果后端没有做对应路由刷新时会有404,IE8以下不支持;

      • 一个不需要后端 nginx 配合(就是将所有的html的请求重定向到 index.html),一个需要。
    2. 导航守卫如何实现登录控制?
      javascript
      router.beforeEach((to, from, next) => {
        if (to.path === '/login') return next()
        if (to受控页面 && 没有登录) return next('/login?return_to'+ encodeURIComponent(to.path))
        next()
      })

路由模式还有一个 Memory 模式

Memory模式不依赖URL,而是通过内存管理路由状态,适合服务器端渲染非浏览器环境下的应用(Node环境或SSR)。

路由的匹配语法

  • 动态路径参数:以 : 开头。
  • 可选参数:? 结尾。
  • 可重复的参数,匹配具有多个部分的路由:*+ 结尾。
  • 自定义正则:以 : 开头,后接正则表达式 ([^/]+)

路由模式vue2迁移变更

新的 history 配置取代 mode

mode: 'history' 配置已经被一个更灵活的 history 配置所取代。根据你使用的模式,你必须用适当的函数替换它。

  • "history": createWebHistory()
  • "hash": createWebHashHistory()
  • "abstract": createMemoryHistory()

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫。
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

路由守卫的作用

  1. 权限校验(登陆验证,角色权限)
  2. 数据预取(动态处理页面标题,取消未完成的请求,防止误操作离开页面)
  3. 错误处理

参考链接

Vue Router官方文档

Vue Router博客

巧用Vue-Router路由守卫实现路由权限控制和加载进度