微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

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

发布时间:2021-04-11 来源:未知 点击:
本篇文章给大家介绍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的同步工作

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: `
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: `
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')

}

]

})

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

这就是微学网-程序员之家为你提供的"10个关于路由vue-router的vuejs面试题(含答案解析)"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14160.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧