CODEWITHSUNDEEP
vue.jsvue-router
PinkiNice
PinkiNice

Reputation: 1493

How to compare two routes by hand

How can I manually (programmatically) compare two routes and find out if they are same? (if router-link-active or router-link-exact-active would be present)

Generally i need this sort of a function

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

Use Case: I have a NestedLink.vue component which is wrapper over router-link. It takes to prop just as router-link (and passes it down to child router-link). If current route is active, nested links will apear nearby.

My approach:

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

It may tell when routes are exact-active but not for not-exact-active.

Upvotes: 3

Views: 1899

Answers (1)

PinkiNice
PinkiNice

Reputation: 1493

This is the code, used inside router-link component.

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
  }
}

So, here's how to use it inside component:

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

Upvotes: 3

Related Questions