路由 vue-router面试题-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

路由 vue-router面试题

[导读]:1.mvvm框架是什么? mvvm即Model-View-ViewModel,mvvm的设计原理是基于mvc的 MVVM是Model-View-ViewModel的缩写,Model代表数据模型负责业务逻辑和数据封装,View代表UI组件负责界面和显示,ViewModel监听模型数据的改变和控制视图行为,处理用户...
  1.mvvm框架是什么?
  mvvm即Model-View-ViewModel,mvvm的设计原理是基于mvc的
  MVVM是Model-View-ViewModel的缩写,Model代表数据模型负责业务逻辑和数据封装,View代表UI组件负责界面和显示,ViewModel监听模型数据的改变和控制视图行为,处理用户交互,简单来说就是通过双向数据绑定把View层和Model层连接起来。在MVVM架构下,View和Model没有直接联系,而是通过ViewModel进行交互,我们只关注业务逻辑,不需要手动操作DOM,不需要关注View和Model的同步工作
 
  2.active-class是哪个组件的属性?
  active-class是router-link终端属性,用来做选中样式的切换,当router-link标签被点击时将会应用这个样式
 
  3.怎么定义vue-router的动态路由?怎么获取传过来的值?
  动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头,如下:
  {
  path:'/details/:id'
  name:'Details'
  components:Details
  }
  当匹配到/details下的路由时,参数值会被设置到this.$route.params下,所以通过这个属性可以获取动态参数
  console.log(this.$route.params.id)
 
  4.vue-router有哪几种导航钩子?
  全局前置守卫
  const router=new VueRouter({})
  router.beforeEach((to,from,next)={
  //to do somethings
  })
  to:Route,代表要进入的目标,它是一个路由对象。
  from:Route,代表当前正要离开的路由,也是一个路由对象
  next:Function,必须需要调用的方法,具体的执行效果则依赖next方法调用的参数
  next():进入管道中的下一个钩子,如果全部的钩子执行完了,则导航的状态就是comfirmed(确认的)
  next(false):终端当前的导航。如浏览器URL改变,那么URL会充值到from路由对应的地址。
  next('/')||next({path:'/'}):跳转到一个不同的地址。当前导航终端,执行新的导航。
  next方法必须调用,否则钩子函数无法resolved
  全局后置钩子
  router.afterEach((to,from)={
  //to do somethings
  })
  后置钩子并没有next函数,也不会改变导航本身。
  路由独享钩子
  beforEnter
  const router=new VueRouter({
  routes:[
    {
      path:'/home',
      component:Home,
      beforeEnter:(to,from,next)={
      //to do somethings
     //参数与全局守卫参数一样
    }
   }
  ]
  })
  组件内导航钩子
  const Home={
  template:`<div></div>`,
  beforeRouteEnter(to,from,next){
    //在渲染该组件的对应路由被confirm前调用
    //不能获取组件实例‘this’,因为当守卫执行前,组件实例还没被创建
   },
  beforeRouteUpdate(to,from,next){
    //在当前路由改变,但是该组件被复用时调用
    //例:对于一个动态参数的路径/home/:id,在/home/1和/home/2之间跳转的时候
    //由于会渲染同样的Home组件,因此组件实例会被复用,而这个钩子就会在这个情况下被调用。
    //可以访问组件实例'this'
   },
  beforeRouteLeave(to,from,next){
    //导航离开该组件的对应路由时调用
    //可以访问组件实例'this'
   }
  }
  beforeRouterEnter不能访问this,因为守卫在导航确认前被调用,因此新组建还没有被创建,可以通过传一个回调给next来访问组件实例。在导航被确认的时候执行回调,并把实例作为回调的方法参数。
  const Home={
  template:`<div></div>`,
  beforeRouteEnter(to,from,next){
  next(vm={
      //通过'vm'访问组件实例
    })
   }
  }
 
  5.$route和$router的区别是什么?
  router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。
  route是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。
 
  6.vue-router响应路由参数的变化
  用watch检测
  //监听当前路由发生变化的时候执行
  watch:{
  $route(to,from){
  console.log(to.path)
      //对路由变化做出响应
    }
  }
  组件内导航钩子函数
  beforeRouteUpdate(to,from,next){
      //to do somethings
  }
 
  7.vue-router传参
  Params
  只能使用name,不能使用path
  参数不会显示在路径上
  浏览器强制刷新参数会被清空,
  //传递参数
  this.$router.push({
  name:Home,
  params:{
      number:1,
      code:'999'
    }
  })
  //接收参数
  const p=this.$route.params
  Query:
  参数会显示在路径上,刷新不会被清空
  name可以使用path路径
  //传递参数
  this.$router.push({
  name:Home,
  query:{
      number:1,
      code:'999'
    }
  })
  //接收参数
  const q=this.$route.query
  hash
  原理是onhashchage事件,可以在window对象上监听这个事件
  window.onhashchange=function(event){
      console.log(event.oldURL,event.newURL)
      let hash=location.hash.slice(1)
  }
  history
  利用了HTML5 History Interface中新增的pushState()和replaceState()方法。
  需要后台配置支持。如果刷新时,服务器没有响应响应的资源,会刷出404,
 
  8.vue-router实现路由懒加载(动态加载路由)
  把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应的组件即为路由的懒加载,可以加快项目的加载速度,提高效率
  const router=new VueRouter({
  routes:[
      {
        path:'/home',
       name:'Home',
        component:()=import('../views/home')
      }
    ]
  })

本文来自E先生的博客,如若转载,请注明出处:https://www.javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ