这篇文章主要介绍了关于路由vue-router的vuejs面试题有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
mvvm即Model-View-ViewModel,mvvm的设计原理是基于mvc的
MVVM是Model-View-ViewModel的缩写,Model代表数据模型负责业务逻辑和数据封装,View代表UI组件负责界面和显示,ViewModel监听模型数据的改变和控制视图行为,处理用户交互,简单来说就是通过双向数据绑定把View层和Model层连接起来。在MVVM架构下,View和Model没有直接联系,而是通过ViewModel进行交互,我们只关注业务逻辑,不需要手动操作DOM,不需要关注View和Model的同步工作
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
<router-link>
和<router-view>
和<keep-alive>
active-class是router-link终端属性,用来做选中样式的切换,当router-link标签被点击时将会应用这个样式
动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头,如下:
{ path: '/details/:id' name: 'Details' components: Details }
访问details目录下的所有文件,如果details/a,details/b等,都会映射到Details组件上。
当匹配到/details下的路由时,参数值会被设置到this.$route.params下,所以通过这个属性可以获取动态参数
console.log(this.$route.params.id)
全局前置守卫
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:’/’}):跳转到一个不同的地址。当前导航终端,执行新的导航。
全局后置钩子
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' 访问组件实例 }) } }
router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。
route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。
用watch 检测
// 监听当前路由发生变化的时候执行 watch: { $route(to, from){ console.log(to.path) // 对路由变化做出响应 } }
组件内导航钩子函数
beforeRouteUpdate(to, from, next){ // to do somethings }
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,
把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应的组件即为路由的懒加载,可以加快项目的加载速度,提高效率
const router = new VueRouter({ routes: [ { path: '/home', name: 'Home', component:() = import('../views/home') } ] })
感谢你能够认真阅读完这篇文章,希望小编分享的“关于路由vue-router的vuejs面试题有哪些”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。