026.整理几个面试题——关于路由

Posted Ruovan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了026.整理几个面试题——关于路由相关的知识,希望对你有一定的参考价值。

关于路由

网上收集整理

01. 【vue-router】 是什么?

  • Vue-router:即SPA(单页应用)的路径管理器
  • 路由模块的本质:就是建立起url和组件之间的一一映射关系

02. 【active-class】 是哪个组件的属性?

  • vue-router模块的包括两个组件:
    • router-link组件
    • router-view组件
  • active-class属于router-link组件的属性

03. 在【router-link】注册事件无效?

  • 使用@click.native
    • 原因:router-link会阻止click事件
    • 添加.native可以直接监听一个原生事件

04. 如何定义动态路由?

  • 当需要经常把某种模式匹配到所有的路由,全部都映射到同一个组件时,可以通过配置动态路由来实现

  • 动态路由匹配:在路由路径中使用动态路径参数进行匹配,其本质就是利用url传递参数

05. vue-router 有哪几种导航钩子?

  • 全局守卫
    • 全局前置守卫:router.beforeEach
    • 全局解析守卫:router.beforeResolve
    • 全局后置钩子:router.afterEach
  • 路由独享守卫
    • 为某个路由对象单独配置的守卫:beforeEnter
  • 组件内守卫
    • beforeRouteEnter:在进入路由前、组件实例创建之前调用
      • 在这个阶段不能获取组件实例this
      • 但可以通过给next()方法传递一个回调来访问组件实例
    • beforeRouteUpdate:在路由改变,但又复用同一个组件时调用
      • 如:从/user1跳转到user/2
    • beforeRouteLeave:在离开当前路由时调用

06. 路由守卫可以接收什么参数?

  • 每个守卫方法可有接收三个参数
    • to:即将前往的目标路由对象

    • from:当前正要离开的路由对象

    • next:一个方法,导航守卫的执行效果依赖于这个方法的调用参数

      • next():表示放行,可以前往目标路由

      • next(false):表示中断当前导航

      • next(‘/’):表示中断当前导航,并跳转到一个新的路由

        • 这里内部参数设置同路由跳转参数设置一致
      • next(error):表示终止导航,并传递一个Error实例

        • 这个错误实例将被router.onError()注册的回调接收

07. 如何监听路由变化?

  • 参数或查询的改变,并不会触发进入(离开)的导航守卫

    • 但可以通过监听 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫
  • 通过watch监听路由变化

    export default 
        watch: 
            $route(to, from)
                // do something
            
        
    
    

08. 【 r o u t e 】 和 【 route】 和 【 routerouter】的区别

  • $route是获取路由信息的一个对象

    // 如:
    export default 
        created()
            let id = this.$route.params; // 获取 params对象参数,没有路由参数则为 空对象
            let query = this.$route.query; // 获取 query对象参数,没有则为 空对象
            let name = this.$route.name; // 获取 当前路由的 名称
    
            let hash = this.$route.hash; // 获取 当前路由的 hash值,包括 # ,没有则为空字符串
            let path = this.$route.path; // 获取 当前路由对象的路径---绝对路径
            let fullPath = this.$route.fullPath; // 获取 当前路由的完整URL,包含查询参数和hash的完整路径
    
            let matched = this.$route.matched; // 获取 当前路由下 路由声明的所有信息、记录
            let redirectedForm = this.$route.refirectedForm; // 获取 当前路由重定向的来源路由(如果有重定向)
        
    
    
  • $router是进行路由跳转的路由实例对象

    // 如:
    export default 
        methods: 
            toRoute()
                this.$router.push(
                    path: '...', // 跳转路径
                    params: , // params参数
                    query:  // query参数
                );
                this.$router.replace(); // 替换当前路由
                this.$router.go(1); // 前进、后退
            
        
    
    

09. 页面传参

  • URL传参

    • params显式传参

      • 需要在路由配置中的path后面添加参数名
      • 且参数会成为路由的一部分:/child/123
      • 页面刷新时,不会丢失参数
    • params隐式传参

      • 需要用name属性匹配参数
      • 参数不会显示到路径上,且页面刷新时会清空参数
    • query传参时

      • 可以用path属性和name属性来匹配路由
      • query参数会正常显示在URL地址栏上:/child?id=123
      • 页面刷新时不会清空参数

    • 同时设置paramsquery对象参数时

      • 如果用name进行匹配,两个对象参数都可以传递
      • 如果用path进行匹配,只能传递query参数
      • 如果用namepath进行匹配,将以name优先
        • 即两个对象参数都可以传递
  • Props传参

    • 布尔类型
    • 对象类型
    • 函数类型

10. vue-router的路由模式有几种

  • hash模式:使用 URL hash 值来作路由

  • history模式:依赖 html5 History API 和服务器配置

  • abstract模式:支持所有 javascript 运行环境,如 Node.js 服务器端

    • 如果发现没有浏览器的 API,路由会自动强制进入这个模式
    switch (mode) 
        case 'history':
            this.history = new HTML5History(this, options.base)
            break
        case 'hash':
            this.history = new HashHistory(this, options.base, this.fallback)
            break
        case 'abstract':
            this.history = new AbstractHistory(this, options.base)
            break
        default:
            if (process.env.NODE_ENV !== 'production') 
                assert(false, `invalid mode: $mode`)
            
    
    

11. 路由模式实现原理?

  • hash 路由模式的实现主要是基于下面几个特性:

    • 使用 URL 的 hash 来模拟一个完整的 URL,当 URL 改变时,页面不会重新加载
    • URL 中 hash 值只是客户端的一种状态,也就是说当向服务器端发出请求时,hash 部分不会被发送
    • hash 值的改变,都会在浏览器的访问历史中增加一个记录
      • 因此我们能通过浏览器的回退、前进按钮控制hash的切换
    • 可以通过 a 标签,并设置 href 属性,当用户点击这个标签后,URL 的 hash 值会发生改变
      • 或者使用 JavaScript 来对 loaction.hash 进行赋值,改变 URL 的 hash 值
    • 我们可以使用 hashchange 事件来监听 hash 值的变化,从而对页面进行跳转(渲染)

    回顾一下:

    在学习HTML的时候,我们知道<a>标签可以创建锚点,并且可以跳转

    <!-- 定义锚点 -->
    <a href="#bottom" name="top">点击跳转到底部</a>
    
    <div style="height:3000px;"></div>
    
    <!-- 定义跳转链接 -->
    <a href="#top" name="bottom">点击跳转到顶部</a>
    
    

    在浏览器里点击跳转链接时

    我们可以看到地址栏里的基本路径没有变化

    但在路径之后增加了#top#bottom

    页面滚动到了对应的锚点处

  • history 路由模式的实现主要基于存在下面几个特性:

    • pushStaterepalceState 两个 API 来操作实现 URL 的变化
    • 我们可以使用 popstate 事件来监听 url 的变化,从而对页面进行跳转(渲染)
    • history.pushState()history.replaceState() 不会触发 popstate 事件,这时我们需要手动触发页面跳转(渲染)

12. 如何实现路由懒加载?

  • 第一种:箭头函数+import,按需导入

  • 第二种:箭头函数+require,

  • 第三种:使用webpack提供的require.ensure()技术

    • 对多个路由指定相同的chunkName,会合并打包成一个js文件
    // r就是resolve
    const List = r => require.ensure([], () => r(require('@/components/list')), 'list');
    // 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
    const router = new Router(
        routes: [
            
                path: '/list',
                component: List,
                name: 'list'
            
        ]
    ))
    
    

以上是关于026.整理几个面试题——关于路由的主要内容,如果未能解决你的问题,请参考以下文章

026.整理几个面试题——关于路由

026.整理几个面试题——关于路由

024.整理几个面试题——关于Data

024.整理几个面试题——关于Data

024.整理几个面试题——关于Data

025.整理几个面试题——关于组件