VUE之vue-router常见面试题

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