vue⾯试题之⼆：路由vue-router⾯试题
vue路由⾯试题
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下的路由时，参数值会被设置到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函数，也不会改变导航本⾝。
路由独享钩⼦
view ui框架
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' 访问组件实例
})
}
}
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
hash
原理是onhashchage事件，可以在window对象上监听这个事件
console.log(event.oldURL, wURL)
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')
}
]
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。