Как сравнить два маршрута вручную - PullRequest
Новая
       7

Как сравнить два маршрута вручную

0 голосов
/ 20 декабря 2018

Как я могу вручную (программно) сравнить два маршрута и выяснить, совпадают ли они?(если присутствует 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.Он принимает to prop точно так же, как router-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.

1 Ответ

0 голосов
/ 25 февраля 2019

Это код, используемый внутри компонента 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)
...