路由的钩子函数？

参考答案

全局的路由钩子函数

  • 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传参并不会显示在地址栏

 

参考答案