VueRouter用过么,怎么理解
- Vue Router是Vue.js的官方路由。它与Vue.js核心深度集成,让用Vue.js构建单页应用变得轻而易举。
- 核心概念的名字和作用:
router-link
、router-view
、嵌套路由、Hash模式和History模式、导航守卫、懒加载(() => import()
) - 常见追问:
- Hash模式和History模式的区别?
- 一个用的Hash(基于URL的hash锚点部分来实现路由)
一个用的History API(基于HTML5 history API来实现路由,还可以使用优缺点
优点:不刷新页面实现路由跳转;
缺点:SEO不友好;
pushState
和replaceState
方法,使得路由变化不会导致页面的刷新)优缺点
优点:后端可以将所有前端路由渲染到同一个页面;
缺点:如果后端没有做对应路由,刷新时会有404,IE8以下不支持;
- 一个不需要后端
nginx
配合(就是将所有的html的请求重定向到index.html
),一个需要。
- 导航守卫如何实现登录控制?javascript
router.beforeEach((to, from, next) => { if (to.path === '/login') return next() if (to受控页面 && 没有登录) return next('/login?return_to'+ encodeURIComponent(to.path)) next() })
- Hash模式和History模式的区别?
路由模式还有一个 Memory 模式
Memory模式不依赖URL,而是通过内存管理路由状态,适合服务器端渲染或非浏览器环境下的应用(Node环境或SSR)。
路由的匹配语法
- 动态路径参数:以
:
开头。 - 可选参数:
?
结尾。 - 可重复的参数,匹配具有多个部分的路由:
*
或+
结尾。 - 自定义正则:以
:
开头,后接正则表达式([^/]+)
。
路由模式vue2迁移变更
新的 history
配置取代 mode
。
mode: 'history'
配置已经被一个更灵活的 history
配置所取代。根据你使用的模式,你必须用适当的函数替换它。
- "history":
createWebHistory()
- "hash":
createWebHashHistory()
- "abstract":
createMemoryHistory()
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave
守卫。 - 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发
DOM
更新。 - 调用
beforeRouteEnter
守卫中传给next
的回调函数,创建好的组件实例会作为回调函数的参数传入。
路由守卫的作用
- 权限校验(登陆验证,角色权限)
- 数据预取(动态处理页面标题,取消未完成的请求,防止误操作离开页面)
- 错误处理
参考链接