本篇文章给大家介绍10个中关于路由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的同步工作。（学习视频分享：vue视频教程）
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视频教程！！
以上就是10个关于路由vue-router的vuejs面试题（含答案解析）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3020462.html
赞 (0)
关于作者
一招搞定Chome最新版vue-devtools安装
上一篇
2025年3月13日 05:36:59
掌握PHP8的新特性：如何使用接口中的私有方法和代码增强封装性？
下一篇
2025年2月25日 09:11:03
AD推荐 黄金广告位招租... 更多推荐
-
-
-
-
相关推荐
-
13道前端vue面试题分享（附答案解析）
本篇文章给大家分享一些前端vue面试题。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 vue面试题 1.vue-router是怎么传递参数的2.v-if和v-for一起使用的弊端以及解决办法3.beforeDestroy…
-
Vue双向数据绑定的原理是什么
双向数据绑定的原理：采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 本教程操作环境：…
-
Vue如何实现带参跳转
本篇文章给大家详细介绍一下vue实现带参跳转的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 主页面：name —> shishengzuotanhuichaxun 此页面表格中的数据均通过接口从后端获取数组对…
-
一招搞定Vue常用指令
本篇文章给大家详细介绍一下vue的常用指令。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 插入文本： v-text 相当于元素的innerText属性，必须是双标签 立即学习“前端免费学习笔记（深入）”； 插入HTML：…
-
为什么使用vue的作用域插槽？什么时候使用？
本篇文章带大家详细了解一下vue的作用域插槽。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 Vue插槽是一种将内容从父组件注入子组件的绝佳方法。（学习视频分享：vue） 下面是一个基本的示例，如果我们不提供父级的任何sl…
-
Vue如何进行环境搭建和项目构建
本篇文章给大家详细介绍一下vue进行环境搭建和项目构建的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 1.下载安装node.js https://nodejs.org/zh-cn/ 2.修改包路径 在node安装目…
-
Vue常用的组件通信方式
本篇文章给大家详细介绍一下vue常用的组件通信方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 组建通信的基本模式:父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子…
-
Vue如何封装一个TodoList
本篇文章给大家详细介绍一下vue封装一个todolist的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 使用Vue封装一个简易的Todolist的小案例. 同时加入了浏览器本地缓存的技术手段. 浏览器本地缓冲: 前…
-
-
-
-
-
-
如何在vue中使用umy-ui
本篇文章给大家详细介绍一下在vue中使用umy-ui的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 1.下载umy-ui http://www.umyui.com/ npm install umy-ui…
-
vuex使用场景是什么
vuex使用场景：1、用户的个人信息管理模块；2、电商项目的购物车模块；3、我的订单模块，订单列表中点击取消订单，然后更新对应的订单列表；4、在订单结算页，获取需要的优惠券，并更新订单优惠信息。 本教程操作环境：windows7系统、vue…
