Convert RouterLink to functional component

[olavoasantos]

What problem does this feature solve?

As this is a simple component which doesn't use state and can be used in several places on the application, the conversion to a functional component could generate performance improvements for the application.

What does the proposed API look like?

The RouterLink component API would not change. The conversion can easily be done by modifying the ./src/components/link.js component to:

export default {
  name: 'RouterLink',
  props: { /**...*/ },
  functional: true,
  render (h, { parent, props, children }) {
    const router = parent.$router
    const current = parent.$route
    const { location, route, href } = router.resolve(props.to, current, props.append)

    const classes = {}
    const globalActiveClass = router.options.linkActiveClass
    const globalExactActiveClass = router.options.linkExactActiveClass

    const activeClassFallback = globalActiveClass == null
      ? 'router-link-active'
      : globalActiveClass
    const exactActiveClassFallback = globalExactActiveClass == null
      ? 'router-link-exact-active'
      : globalExactActiveClass
    const activeClass = props.activeClass == null
      ? activeClassFallback
      : props.activeClass
    const exactActiveClass = props.exactActiveClass == null
      ? exactActiveClassFallback
      : props.exactActiveClass
    const compareTarget = location.path
      ? createRoute(null, location, null, router)
      : route

    classes[exactActiveClass] = isSameRoute(current, compareTarget)
    classes[activeClass] = props.exact
      ? classes[exactActiveClass]
      : isIncludedRoute(current, compareTarget)

    const handler = e => {
      if (guardEvent(e)) {
        if (props.replace) {
          router.replace(location)
        } else {
          router.push(location)
        }
      }
    }

    const on = { click: guardEvent }
    if (Array.isArray(props.event)) {
      props.event.forEach(e => { on[e] = handler })
    } else {
      on[props.event] = handler
    }

    const data = {
      class: classes
    }

    if (props.tag === 'a') {
      data.on = on
      data.attrs = { href }
    } else {
      const a = findAnchor(children)
      if (a) {
        a.isStatic = false
        const aData = a.data = extend({}, a.data)
        aData.on = on
        const aAttrs = a.data.attrs = extend({}, a.data.attrs)
        aAttrs.href = href
      } else {
        data.on = on
      }
    }

    return h(props.tag, data, children)
  }
}

[posva]

Thanks for the proposal but this has been already discussed (there is even a PR opened) and it would break some behaviours of vue router making it a breaking change

[olavoasantos]

Sorry about that. Tried searching but didn't find it. Thanks for answering.