站长资讯网本篇文章给大家介绍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 的核心深度集成，让构建单页面应用变得易如反掌。
<router-link>和<router-view>和<keep-alive>
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: `<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' 访问组件实例 }) } }
【
