189 8069 5689

关于路由vue-router的vuejs面试题有哪些

这篇文章主要介绍了关于路由vue-router的vuejs面试题有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

崇明网站建设公司成都创新互联公司,崇明网站设计制作，有大型网站制作公司丰富经验。已为崇明近千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的崇明做网站的公司定做！

路由 vue-router 面试题

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 的核心深度集成，让构建单页面应用变得易如反掌。

  • 和和

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: `
  • beforeRouterEnter不能访问this，因为守卫在导航确认前被调用，因此新组建还没有被创建,可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并把实例作为回调的方法参数。
const Home = {
  template: `
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-router的vuejs面试题有哪些”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
            
            
                        

            新闻标题：关于路由vue-router的vuejs面试题有哪些            

            标题网址：http://cdxtjz.cn/article/ijcjeo.html

其他资讯