Vue面试题总结(二)之 vue-router
vue-router是什么Vue Router 是 Vue.js 官方的路由管理器,创建单页应用程序:通过Vue.js,我们已经在使用组件组成应用程序。将Vue Router添加到混合中时,我们要做的就是将组件映射到路由,并让Vue Router知道在哪里渲染它们vue-router 的功能嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效
vue-router是什么
Vue Router 是 Vue.js 官方的路由管理器,创建单页应用程序:通过Vue.js,我们已经在使用组件组成应用程序。将Vue Router添加到混合中时,我们要做的就是将组件映射到路由,并让Vue Router知道在哪里渲染它们
vue-router 的功能
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为
复用组件时,怎么对路由参数的变化作出响应
可以使用watch (监测变化) $route 对象
或者使用beforeRouteUpdate 导航守卫
beforeEach三个参数to 、from 、next 的作用
1,to: Route,代表要进入的目标,它是一个路由对象;
2,from: Route,代表当前正要离开的路由,同样也是一个路由对象;
3,next: Function,这是一个必须需要调用的方法,而具体的执行效果则依赖 next 方法调用的参数
对路由重定向(redirect)和别名(alias)的理解
“重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b
/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
vue-router有哪几种导航钩子( 导航守卫 )
1、全局守卫: router.beforeEach
2、全局解析守卫: router.beforeResolve
3、全局后置钩子: router.afterEach
4、路由独享的守卫: beforeEnter
5、组件内的守卫: beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
完整的 vue-router 导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach守卫。
- 在重用的组件里调用beforeRouteUpdate守卫 (2.2+)。
- 在路由配置里调用beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用beforeRouteEnter。
- 调用全局的 beforeResole 守卫 (2.5+)。
- 导航被确认
- 调用全局的afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用beforeRouteEnter 守卫中传给 next的回调函数。
hash 模式和History 模式的理解
hash 模式:在用超链接制作锚点跳转的时候,就会发现,url后面跟了"#id"(略。。。啊格雷),hash值就是url中从"#"号开始到结束的部分。当 URL 改变时,页面不会重新加载。
History 模式 :history就是我们平时看到的正常的连接形式。利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL。
注意一点:history 模式需要后端配合将所有访问都指向index.html,否则用户刷新页面,会导致 404 错误。
设置路由的过渡效果(过渡动效)
<router-view>
是基本的动态组件,可以用<transition>
组件给它添加一些过渡效果,可以在各路由组件内使用<transition>
并设置不同的 name,让每个路由组件有各自的过渡效果。
路由懒加载优化代码
一般情况下,会使用懒加载去优化性能,当路由被访问的时候才加载对应组件,可以使用动态 import 语法来定义代码分块点。
更多推荐
所有评论(0)