$router is undefined in RouterLink component in Google WebCache pages

[VsevolodChumachenko]

Version

3.4.9

Reproduction link

[https://webcache.googleusercontent.com/search?q=cache:-AlwFLsePq8J:https://strahovka.ru/e-osago &cd=1&hl=ru&ct=clnk&gl=ru](https://webcache.googleusercontent.com/search?q=cache:-AlwFLsePq8J:https://strahovka.ru/e-osago &cd=1&hl=ru&ct=clnk&gl=ru)

Steps to reproduce

visit https://webcache.googleusercontent.com/search?q=cache:-AlwFLsePq8J:https://strahovka.ru/e-osago &cd=1&hl=ru&ct=clnk&gl=ru

What is expected?

$router isn't undefined and error doesn't fall

What is actually happening?

$router in RouterLink component is undefined and the error falls

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

---

Maybe the router plugin isn't installed or something but I can't do anything with that as a repro. There is #2042 related to cache

[VsevolodChumachenko]

@posva I tried to understand what is the problem. I debug the process and noticed the problem. I think the problem is that when we open page in google web cache it has route like this https://webcache.googleusercontent.com/search?q=cache%3A-AlwFLsePq8J%3Ahttps%3A%2F%2Fstrahovka.ru%2Fe-osago%20&cd=1&hl=ru&ct=clnk&gl=ru and like you see it has /search route, that is current, so $route is undefined, because it doesn't matched that route in route list, because we don't have that route on our site. You can see it in this part of code. It is match() method in matcher. You can see it in vue-router.js:

...
} else if (location.path) {
  location.params = {};
  for (var i = 0; i < pathList.length; i++) {
    var path = pathList[i];
    var record$1 = pathMap[path];
    if (matchRoute(record$1.regex, location.path, location.params)) {
      return _createRoute(record$1, location, redirectedFrom)
    }
  }
}
// no match
return _createRoute(null, location)

But links in web page, that represents by RouterLink component are exist and they have valid route, so in function isSameRoute(), that is used in render function of RouterLink

classes[exactActiveClass] = isSameRoute(current, compareTarget); // current is undefined but compareTarget not

the process is crushed because it only checks compareTarget (argument b in isSameRoute()):

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 I think that you should also check current argument, because it may be undefined like in my example

[cihangull]

Version

3.4.9

Reproduction link

[https://webcache.googleusercontent.com/search?q=cache:-AlwFLsePq8J:https://strahovka.ru/e-osago &cd=1&hl=ru&ct=clnk&gl=ru](https://webcache.googleusercontent.com/search?q=cache:-AlwFLsePq8J:https://strahovka.ru/e-osago &cd=1&hl=ru&ct=clnk&gl=ru)

Steps to reproduce

visit https://webcache.googleusercontent.com/search?q=cache:-AlwFLsePq8J:https://strahovka.ru/e-osago &cd=1&hl=ru&ct=clnk&gl=ru

What is expected?

$router isn't undefined and error doesn't fall

What is actually happening?

$router in RouterLink component is undefined and the error falls

We are having the same problem. Did you find a solution?

[VsevolodChumachenko]

Version

3.4.9

Reproduction link

[https://webcache.googleusercontent.com/search?q=cache:-AlwFLsePq8J:https://strahovka.ru/e-osago &cd=1&hl=ru&ct=clnk&gl=ru](https://webcache.googleusercontent.com/search?q=cache:-AlwFLsePq8J:https://strahovka.ru/e-osago &cd=1&hl=ru&ct=clnk&gl=ru)

Steps to reproduce

visit https://webcache.googleusercontent.com/search?q=cache:-AlwFLsePq8J:https://strahovka.ru/e-osago &cd=1&hl=ru&ct=clnk&gl=ru

What is expected?

$router isn't undefined and error doesn't fall

What is actually happening?

$router in RouterLink component is undefined and the error falls

We are having the same problem. Did you find a solution?

We made component, that checks if the $router is and after renders:

export default {
  render() {
    if (!this.$route) {
      return <a href={this.$attrs.to}>{this.$slots.default}</a>;
    }

    return (
      <nuxt-link {...{ attrs: this.$attrs, on: this.$listeners }}>
        {this.$slots.default}
      </nuxt-link>
    );
  },
};

[abyss-soft]

Solution supplement: Link