10个关于路由vue-router的vuejs面试题（含答案解析）

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

  • beforeRouterEnter不能访问this，因为守卫在导航确认前被调用，因此新组建还没有被创建,可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并把实例作为回调的方法参数。

1

2

3

4

5

6

7

8

const Home = {

  template: `<div</div`,

  beforeRouteEnter(to, from, next){

    next( vm = {

      // 通过 'vm' 访问组件实例

    })

  }

}

【相关推荐：vue.js教程】

6. $route和 $router的区别是什么？
  • router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
  • route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。
7. vue-router响应路由参数的变化
  • 用watch 检测

1

2

3

4

5

6

7

// 监听当前路由发生变化的时候执行

watch: {

  $route(to, from){

    console.log(to.path)

    // 对路由变化做出响应

  }

}

  • 组件内导航钩子函数

1

2

3

beforeRouteUpdate(to, from, next){

  // to do somethings

}

8. vue-router 传参
  • Params
    • 只能使用name，不能使用path
    • 参数不会显示在路径上
    • 浏览器强制刷新参数会被清空，

1

2

3

4

5

6

7

8

9

10

// 传递参数

this.$router.push({

  name: Home，

  params: {

      number: 1 ,

      code: '999'

  }

})

// 接收参数

const p = this.$route.params

  • Query:

    • 参数会显示在路径上，刷新不会被清空
    • name 可以使用path路径

1

2

3

4

5

6

7

8

9

10

// 传递参数

this.$router.push({

  name: Home，

  query: {

  number: 1 ,

  code: '999'

}

                  })

// 接收参数

const q = this.$route.query

9. vue-router的两种模式

  • hash

    • 原理是onhashchage事件，可以在window对象上监听这个事件

1

2

3

4

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实现路由懒加载（动态加载路由）
  • 把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

1

2

3

4

5

6

7

8

9

const router = new VueRouter({

  routes: [

    {

      path: '/home',

      name: 'Home'，

      component:() = import('../views/home')

        }

  ]

})

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

更多编程相关知识，请访问：编程视频！！

以上就是10个关于路由vue-router的vuejs面试题（含答案解析）的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

vue前端用什么开发工具

vue组件中如何引入css文件

vue和react能做什么

vue nodejs 什么区别

如何在vue中使用umy-ui

vue中如何分离css

vue中mint ui是什么？

vue.js能做轮播图吗

ant design支持vue吗

怎么安装vue.js

更多相关阅读请进入《vue》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...