vue面试题之二：路由 vue-router 面试题

短命女 2024-04-19 15:30 66阅读 0赞

### 2. vue路由面试题 ###

##### 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. vue-router是什么？有哪些组件？ #####

*  Vue Router 是 [Vue.js][] 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
 *  `<router-link>`和`<router-view>`和`<keep-alive>`

##### 3. active-class 是哪个组件的属性？ #####

active-class是router-link终端属性，用来做选中样式的切换，当router-link标签被点击时将会应用这个样式

##### 4. 怎么定义vue-router的动态路由？怎么获取传过来的值？ #####

*  动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

{ 
      path: '/details/:id'
      name: 'Details'
      components: Details
    }

访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。

*  当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数

console.log(this.$route.params.id)

##### 5. 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' 访问组件实例
        })
      }
    }

##### 6. $route和 $router的区别是什么？ #####

*  router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
 *  route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

##### 7. vue-router响应路由参数的变化 #####

*  用watch 检测

// 监听当前路由发生变化的时候执行
    watch: { 
      $route(to, from){ 
        console.log(to.path)
        // 对路由变化做出响应
      }
    }

*  组件内导航钩子函数

beforeRouteUpdate(to, from, next){ 
      // to do somethings
    }

##### 8. 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

##### 9. vue-router的两种模式 #####

*  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，

##### 10. vue-router实现路由懒加载（动态加载路由） #####

*  把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

const router = new VueRouter({ 
      routes: [
        { 
          path: '/home',
          name: 'Home'，
          component:() = import('../views/home')
    		}
      ]
    })

#### 以上是经过参考很多同行分享与官方文档，汇总的一份总结，如有不对，请指出，最后感谢大家观看，求点赞，求分享，求评论，求打赏~~ ####

[Vue.js]: http://cn.vuejs.org/