如何手动比较两条路线

Question

如何手动（以编程方式）比较两条路线并确定它们是否相同？（如果存在 router-link-active 或 router-link-exact-active）

通常我需要这种功能

/* 
   @params route1, route2 : Route
*/
function isActivated(route1, route2) {
  /* comparing them somehow */
  return {
    exactActive,
    active
  };
}

用例： 我有一个 NestedLink.vue 组件，它是 router-link 的包装器。它像 router-link 一样接受 to 属性（并将其向下传递给子路由器-link）。如果当前路线处于活动状态，嵌套的 link 将出现在附近。

我的做法:

function isActivated(route1, route2) {
  if (
    route1.matched.some(record =>
      record.regex.test(route2.fullPath)
    )
  ) {
    return { exactActive: true };
  }
  return { exactActive: false };
}

它可能会告诉你什么时候路由是 exact-active 但不是 not-exact-active。

Answer 1

这是代码，在 router-link 组件中使用。

const START = '/';
const trailingSlashRE = /\/?$/;

function isObjectEqual (a, b) {
  if ( a === void 0 ) a = {};
  if ( b === void 0 ) b = {};

  // handle null value #1566
  if (!a || !b) { return a === b }
  var aKeys = Object.keys(a);
  var bKeys = Object.keys(b);
  if (aKeys.length !== bKeys.length) {
    return false
  }
  return aKeys.every(function (key) {
    var aVal = a[key];
    var bVal = b[key];
    // check nested equality
    if (typeof aVal === 'object' && typeof bVal === 'object') {
      return isObjectEqual(aVal, bVal)
    }
    return String(aVal) === String(bVal)
  })
}

function isSameRoute (a, b) {
  if (b === START) {
    return a === b
  } else if (!b) {
    return false
  } else if (a.path && b.path) {
    return (
      a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
      a.hash === b.hash &&
      isObjectEqual(a.query, b.query)
    )
  } else if (a.name && b.name) {
    return (
      a.name === b.name &&
      a.hash === b.hash &&
      isObjectEqual(a.query, b.query) &&
      isObjectEqual(a.params, b.params)
    )
  } else {
    return false
  }
}

所以，下面是如何在组件内部使用它：

// OR JUST A STRING '/home'
let link = { name: 'home' } 
// will return true of false
let result = isSameRoute(this.$router.resolve(link).resolved, this.$route)

如何手动比较两条路线

How to compare two routes by hand

vue.js

vue-router