VUE之vue-router常见面试题
1.vue-router怎么重定向的?在routes:[{{ path: '/a', redirect: '/b' }}]2.vue-router 是什么?它有哪些组件答:vue用来写路由一个插件。有router-link、router-view3.active-class 是哪个组件的属性?答:vue-router模块的router-link组件。children数组来定义子路由4.怎么定义 v
1.vue-router怎么重定向的?
在routes:[{{ path: '/a', redirect: '/b' }}]
2.vue-router 是什么?它有哪些组件
答:vue用来写路由一个插件。有router-link、router-view
3.active-class 是哪个组件的属性?
答:vue-router模块的router-link组件。children数组来定义子路由
4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值?怎么获取当前的路由信息?
答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id。使用this.$router获取当前的路由信息。
5.vue-router钩子函数有哪些?都有哪些参数?有哪些作用?
全局:前置守卫:beforeEach((to, from, next)=>{to:即将进入的路由对象form:当前导航正要离开的路由next():进行管道中的下一个钩子})
解析守卫:beforeResolve((to, from, next)=>{})
后置钩子:afterEach((to,form)=>{})
路由:beforeEnter((to, from, next)=>{})
组件:beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 this// 因为当守卫执行前,组件实例还没被创建},
beforeRouteUpdate (to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 this},
beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用 //可以访问组件实例 this}。
作用:vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消。
6.$route 和 $router 的区别是什么?
答:$router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。
7.说说vue-router的两种模式
答:hash模式:即地址栏 URL 中的 # 符号;使用变更hash不会刷新页面的特性, 来变更路由, 做到单页面无刷新
history模式:window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)。可以在router文件夹下的index.js文件中配置为mode:'history'
8.vue-router实现路由懒加载( 动态加载路由 )的方式有哪些?
答:有三种方式
第一种:vue异步组件技术 ==== 异步加载,vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种:路由懒加载(使用import)。
第三种:webpack提供的require.ensure(),vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
9.Vue-router跳转和location.href有什么区别?
答:使用location.href='/url'来跳转,简单方便,但是刷新了页面;
使用history.pushState('/url'),无刷新页面,静态跳转;
引进router,然后使用router.push('/url')来跳转,使用了diff算法,实现了按需加载,减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的,因为vue-router就是用了history.pushState(),尤其是在history模式下。
10.怎么配置404页面?
{ path: '/404',
component: () => import('@/views/error-page/404'),
hidden: true
},
//这个*匹配必须放在最后,将改路由配置放到所有路由的配置信息的最后, //否则会其他路由path匹配造成影响。
{ path: '*',
redirect: '/404',
hidden: true
}
11.切换路由时需要保存草稿的功能,怎么实现?
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
使用$route.meta的keepAlive属性:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
需要在router中设置router的元信息meta:
//...router.js
export default new Router({
routes: [
{ path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
{ path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})
12.vue-router如何响应路由参数的变化?
什么是路由参数的变化?
当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
监测路由参数变化的方法?
方法一:watch监听,
方法二:导航守卫
13.切换到新路由时,页面要滚动到顶部或保持原先的滚动位置怎么做呢?
滚动到顶部:在new Router()的时候,配置scrollBehavior(to, from, savedPosition) {return { x: 0, y: 0 }}
14.说说vue-router完整的导航解析流程是什么?
- 导航被触发
- 在即将离开的组件里调用beforeRouteLeave守卫
- 调用全局前置守卫beforeEach守卫
- 在重用的组件里调用beforeRouteUpdate守卫 / 调用路由配置的beforeEnter守卫
- 解析异步路由组件
- 在被激活的组件里调用beforeRouteEnter
- 调用全局的beforeResolve守卫
- 导航被确认
- 调用全局的 afterEach 钩子
- 触发DOM更新
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
15.路由之间是怎么跳转的?有哪些方式?
组件导航router-link router-view
编程导航router.push router.replace router.go
附:
VUE最全面试题:https://blog.csdn.net/qq_41161982/article/details/112647861
VUE之VUEX常见面试题:https://blog.csdn.net/qq_41161982/article/details/112648598
VUE之生命周期面试题: https://blog.csdn.net/qq_41161982/article/details/112649973
更多推荐
所有评论(0)