路由 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.active-class是哪个组件的属性？

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

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

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

　　{

　　path:'/details/:id'

　　name:'Details'

　　components:Details

　　}

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

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

　　4.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'访问组件实例

　　 })

　　 }

　　}

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

　　router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

　　route是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

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

　　用watch检测

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

　　watch:{

　　$route(to,from){

　　console.log(to.path)

　　 //对路由变化做出响应

　　 }

　　}

　　组件内导航钩子函数

　　beforeRouteUpdate(to,from,next){

　　 //to do somethings

　　}

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

　　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，

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

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

　　const router=new VueRouter({

　　routes:[

　　 {

　　 path:'/home',

　　 name:'Home'，

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

　　 }

　　 ]

　　})

本文来自投稿，不代表阿习进阶博客立场，如若转载，请注明出处：https://www.yanxias.com/qianduan/156.html

路由 vue-router面试题

相关推荐