Recognize Props Passed to router-view As Reactive

[martinmckenna]

What problem does this feature solve?

Currently having an issue where I want to

1. Create a nested router-view
2. Do some API fetching in the parent
3. Pass down data to all the children components
4. Have the children re-render when the reactive values update

What I tried was this

/* my-view.vue */

<template>
  <router-view
    :data="data"
    :loading="loading"
    :error="error"
    :lastUpdated="lastUpdated"
  />
</template>

<script>
import { useAPIRequest } from '@/hooks/useAPIRequest';

export default {
  setup() {
   /* this will make the API request on mount and update the appropriate values on resolve/reject */
    const {
      data,
      loading,
      error,
      lastUpdated,
    } = useAPIRequest(
      () => Promise.resolve([]),
    );

    return {
      data,
      loading,
      error,
      lastUpdated,
    };
  },
};
</script>

<style lang="scss" scoped></style>

/* useAPIRequest.js */

import { ref } from '@vue/composition-api';
/**
 *
 * @param { () => Promise<any> } request
 * @param { any } initialData
 *
 * @returns {
 *  loading: boolean;
 *  error: any;
 *  lastUpdated: number;
 *  data: any;
 * }
 */
export const useAPIRequest = (
  request,
  initialData,
) => {
  const data = ref(initialData || null);
  const loading = ref(true);
  const error = ref(null);
  const lastUpdated = ref(0);

  const handleRequest = () => {
    if (!request) {
      return Promise.resolve();
    }

    if (lastUpdated.value === 0) {
      loading.value = true;
    }
    return request()
      .then((response) => {
        data.value = response;
        loading.value = false;
        lastUpdated.value = Date.now();
        error.value = null;
      })
      .catch((err) => {
        error.value = err;
        loading.value = false;
      });
  };

  handleRequest();

  return {
    data,
    loading,
    error,
    lastUpdated,
    update: handleRequest,
  };
};

export default useAPIRequest;

But this doesn't work because the components that are rendered in the nested routes have access to these values through attrs.data, attrs.loading, attrs.lastUpdated, etc. They are not reactive and the children components don't re-render when these values change

What ended up working for me was passing the values down as refs, like so

/* my-view.vue */

<template>
  <router-view
    :data="data"
    :loading="loading"
    :error="error"
    :lastUpdated="lastUpdated"
  />
</template>

<script>
import { computed } from '@vue/composition-api';
import { useAPIRequest } from '@/hooks/useAPIRequest';

export default {
  setup() {
    const {
      data,
      loading,
      error,
      lastUpdated,
    } = useAPIRequest(
      () => Promise.resolve([]),
    );

    return {
      data: computed(() => data),
      loading: computed(() => loading),
      error: computed(() => error),
      lastUpdated: computed(() => lastUpdated),
    };
  },
};
</script>

<style lang="scss" scoped></style>

But I'm assuming passing down refs is an anti-pattern and probably isn't recommended.

My ask is that I want the ability to pass down reactive values to <router-view /> children and have them re-render when these values change

What does the proposed API look like?

Possibly <router-view render="(Component => <Component myProp="something" />)" />

[martinmckenna]

Some questions that hopefully I can answer before they're asked.

Why not just make the API request in each route?

Because I want to make the API request once and not have to keep making it every time the user navigates to another sibling page. There's no reason the network request needs to be made a second time after it's requested once.

Why not just make the request in a wrapper component and use v-if conditionals on the route.fullPath to determine which child component to render?

Because that defeats the purpose of using the children prop on the router instance entirely. I might as well just never use children in that case.

Why not just request and store it in Vuex?

That's overkill. I don't want this stuff to be requested unless the user goes to the routes that need this data, and I don't want to have to worry about clearing it from Vuex when they leave the routes that need this data.

[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.

---

If you are reporting a bug please follow https://new-issue.vuejs.org/?repo=vuejs/vue#why-repro

[martinmckenna]

ok this is a feature request. There is something vue router doesn't do, that I want it to do. react-router already solves this problem with the proposed API posted above.

I've also already asked on Discord and was directed here.

thanks for closing though extremely helpful 👍

[martinmckenna]

@posva this is already a thing in vue-router next. You give us access to the component here as a slot prop:

https://github.com/vuejs/vue-router-next/blob/master/src/RouterView.ts#L177

So can we get this into this project as well??

I want to be able to do this

<router-view v-slot="{ Component }">
  <component
    :is="Component"
    :foo="foo"
    :bar="bar"
  />
</router-view>

[LinusBorg]

In my understanding, the component that's being rendered by the router-view should update.

In Vue 2 / VueRouter 3, props passed to the router-view are passed down to the child. And when these props change, router-view is re-rendered, passing new values to the component it renders for the current route.

Demo: https://jsfiddle.net/Linusborg/15verdpx/

Edit: Now realized you write this:

But this doesn't work because the components that are rendered in the nested routes have access to these values through attrs.data, attrs.loading, attrs.lastUpdated, etc. They are not reactive and the children components don't re-render when these values change

...but that also works for me:

https://jsfiddle.net/Linusborg/78ma5bpc/

...$attrs is reactive, so it context.attrs in setup.

If that doesn't work for you, maybe take a step back and come up with a demo of what you want to do, but router doesn't support.

You also talk about nested components, and it sounds like you mean nested routes, but none of the code your provide actually contains nested components, so it's hard to pinpoint where the supposed missing feature comes into play. The proposed API also isn't related to / working with nested children, as far as I can tell.

[haoxi911]

It has been 2 years, I am wondering what's the up-to-date approach to deal with this issue, assuming we don't introduce pinia or vuex. Also see the recent update here, passing massive data via props is not allowed anymore. Thank you!