• vue 路由面试题


    10. vue-router怎么重定向页面?

    路由中配置 redirect 属性  【ri ːdə ai k t】
    

    11. 说说你对router-link的了解

    用于跳转路由, 类似于a标签, 它一般也会渲染成a标签, 
    但是可以通过tag来【变更】【渲染的元素】, 通过to来跳转
    

    12. vue-router怎么配置404页面?

    const router = new VueRouter(
        { 
            mode: 'history',
            routes: [
                { path: '*', component: NotFoundComponent } 
            ] 
        }
    )
    将 path:* 放在最后, 【pɑ θ】
    因为如果放在前面会导致后面的的不能匹配,
    

    13. 切换路由时,需要保存草稿的功能,怎么实现呢?

    1.用keep-alive缓存那个路由
    2.可以用beforeDestroy
    或者window.onbeforeunload解决性能问题
    

    14. vue-router如何【响应路由参数】的变化?

    向 router-view 组件中添加 key
    <router-view :key="$route.fullPath"></router-view>
    $route.fullPath 包含其【参数信息】和hash完整路径
    

    15. 问题:为什么要【响应参数】变化?

    路由参数发生了变化,但是页面数据并未及时更新,需要强制刷新后才会变化。
    

    16. scrollBehavior

    
    

    17. vue-router是用来做什么的?它有哪些组件?

    通俗来讲主要是来实现页面的跳转,
    通过设置不同的path,向服务器发送的不同的请求,获取不同的资源。
    主要组件:router-view、router-link
    

    18. route和router有什么区别?

    route:代表当前【路由信息对象】,可以获取到当前路由的【信息参数】
    router:是vueRouter的实例的对象,包含了路由的跳转方法,钩子函数等
    

    19. vue-router路由有几种模式?说说它们的区别?

    vue-router 有 3 种路由模式:hash、history、abstract,对应的源码如下所示:
    hash: 使用 hash 值来作路由。支持所有浏览器。
    history : 有些浏览器不支持
    abstract : [ æ bˈstræ k t] 支持所有 JavaScript 运行环境,如 Node.js 服务器端。
    如果发现没有浏览器的 API,路由【会自动强制进入】这个模式.
    

    20. vue-router有哪几种导航钩子( 导航守卫 )?

    答:三种,
    第一种:是全局导航钩子:
    router.beforeEach(to,from,next){}
    router.afterEach(to,from,next){} 
    作用:跳转前进行判断拦截。 2个
    
    第二种:组件内的钩子   
    beforeRouteEnter (to, from, next) { }
    beforeRouteLeave(to, from, next){ }
    
    第三种:单独路由独享钩子
    beforEnter:(to, form,next) => { 
    	
    }
    

    21.在vue组件中怎么获取到当前的路由信息?

    可以 console.log(this.$route) 查看其详细信息
    

    22.你有看过vue-router的源码吗?说说看

    完成了router-link和 router-view 两个组件的注册,
    router-link用于触发路由的变化,
    router-view用于展示【对应路由的视图】
    混入beforeCreate生命周期处理,全局设置VUE静态访问$router和$route,方便后期访问
    
    根据【路由配置】生成router实例
    根据配置【数组】生成【路由配置记录表】
    调用init()函数,完成首次路由的渲染,
    
    根据router的match函数,
    生成一个新的route对象,
    接着通过 confirmTransition对比一下【新生成】的route和【当前的route对象】是否改变,
    改变的话触发updateRoute,更新current属性,
    触发根组件的_route的变化,从而导致组件的调用render函数,更新router-view。
    
    另外一种更新路由的方式是主动触发,
    router-link绑定了click方法,触发history.push或者history.replace,
    从而触发history.transitionTo
    
    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    Android推送服务——百度云推送
    关于HierarchyViewer的使用
    Android开发者的演示工具——asm.jar
    重装huson遇到的一些错误及解决
    对比语法错误、语义错误以及运行时错误
    对比常量存储与堆栈
    php下载文件夹目录下的文件
    B/S(WEB)系统中使用Activex插件调用扫描仪实现连续扫描并上传图像(IE文件扫描并自动上传
    上传文件夹
    如何在Web页面里使用高拍仪扫描上传图像
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15758296.html
Copyright © 2020-2023  润新知