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

Posted 2021-08-28 Ruovan

关于路由

• • • 01. 【vue-router】 是什么?
    • 02. 【active-class】 是哪个组件的属性？
    • 03. 在【router-link】注册事件无效？
    • 04. 如何定义动态路由？
    • 05. vue-router 有哪几种导航钩子?
    • 06. 路由守卫可以接收什么参数？
    • 07. 如何监听路由变化？
    • 08. 【$route】和【$router】的区别
    • 09. 页面传参
    • 10. vue-router的路由模式有几种
    • 11. 路由模式实现原理？
    • 12. 如何实现路由懒加载？

关于路由

网上收集整理

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. 【$route】和【$router】的区别

• $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
    • 页面刷新时不会清空参数

    ---

  • 同时设置params和query对象参数时

    • 如果用name进行匹配，两个对象参数都可以传递
    • 如果用path进行匹配，只能传递query参数
    • 如果用name和path进行匹配，将以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 路由模式的实现主要基于存在下面几个特性：

  • pushState 和 repalceState 两个 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'
          }
      ]
  }))