Vue-Router面试题

路由的钩子函数？

参考答案

全局的路由钩子函数

• beforeEach
• afterEach

单个的路由钩子函数（路由独享）

• beforeEnter

组件内的路由钩子函数

• beforeRouteEnter
• beforeRouteLeave
• beforeRouteUpdate

导航守卫的三个参数的含义？

参考答案

• to: 即将要进入的目标路由对象
• from: 当前导航正要离开的路由对象
• next: 此函数必须调用，不然路由跳转不过去
  • next(): 进入下一个路由
  • next(false): 中断当前的导航
  • next(‘/‘)或next({ path: ‘/‘ }) : 跳转到其他路由，当前导航被中断，进行新的一个导航。

路由导航守卫和Vue实例生命周期钩子函数的执行顺序？

参考答案

路由导航守卫都是在vue实例生命周期钩子函数之前执行的

route和router有什么区别？

参考答案

route是“路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数

router是“路由实例对象”，包括了路由的跳转方式，钩子函数等

路由的跳转方式？

参考答案

• 声明式（标签跳转） <router-link to="home"></router-link>
• 编程式 this.$router.push({path: "home", query: {num: 1}})

如何获取路由传过来的参数？

参考答案

• query：this.$route.query.userId
• params：this.$route.params.userId

参考答案

• query： this.$router.push({path:"home", query:{id:"123"}}) this.$route.query.id

  params： this.$router.push({path:"home", query:{id:"123"}}) this.$route.params.id

• query刷新页面参数不会消失，params刷新页面参数会消失，可以考虑本地存储解决
• query传参会显示url地址上，params传参并不会显示在地址栏

参考答案

Vue-Router面试题

原文：https://www.cnblogs.com/naturl/p/15173914.html