Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose the matched route record (route.matched[viewDepth]) #1408

Open
posva opened this issue May 19, 2022 · 0 comments
Open

Expose the matched route record (route.matched[viewDepth]) #1408

posva opened this issue May 19, 2022 · 0 comments
Labels
enhancement New feature or request needs RFC This feature needs to go through the RFC process first

Comments

@posva
Copy link
Member

posva commented May 19, 2022

When dealing with nested routes, it is often useful to access information relative to a specific route record:

const routes = [
  { path: '/', meta: { title: 'Parent' }, component: Parent, children: [
    { path: 'child', meta: { title: 'Child' }, component Child }
  ]}
]

In this scenario, when visiting /child, useRoute().meta.title will be "Child" everywhere in the app. But sometimes we need to get access to the relative information within the Parent and Child component. The question is is there anything else needed from route records besides meta?

To currently access this information, we need to index the route.matched array with the depth of the current view. Usually, you know this information within the component (as a hardcoded number) but that's not always the case, so we can instead inject the depth of the current view with viewDepthKey (https://github.com/vuejs/router/blob/main/src/index.ts#L29) or directly the matchedRouteKey with something like:

import { matchedRouteKey } from 'vue-router'

export function useMatchedRoute() {
  return inject(matchedRouteKey)!
}

This could also be exposed directly in <RouterView>s slot:

<RouterView v-slot="{ matchedRoute, Component }">
  <component :is="Component" :some-prop="matchedRoute.meta.something" />
</RouterView>
  • Could this create unexpected re-render issues?
  • Should we expose meta directly instead?

From

@posva posva added enhancement New feature or request needs RFC This feature needs to go through the RFC process first labels May 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request needs RFC This feature needs to go through the RFC process first
Projects
None yet
Development

No branches or pull requests

1 participant