Adding meta for routes without a component #33
Comments
|
This would be nice for applying |
|
Here we're building our navigation menus from the routes table (using metadata added in route blocks). We used the following hack to work-around this:
if (route.node.value.overrides?.remove)
{
// Move metadata to parent, depends on your use cases
route.parent.addToMeta(route.node.value.overrides.meta);
// Remove from routing table
route.delete();
}If anyone's interested, that approach works. Random remark: |
|
Thanks for sharing your approach!
Yes, EditableTreeNode is definitely still missing some APIs but also docs and examples 😅 |
Called like this, vscode does not report an error |
@posva |
|
@AAABingBing This issue is open, there is no support for |
Oh, I see |
This method solves my problem, but I have another question Such as:
In this case, I cannot use the
|
|
@AAABingBing in your case, use <RouterView />That will add |
Sorry, maybe I understand incorrectly <script setup>
import IconLayout from '~icons/tabler/layout'
definePage({
remove: true,
meta: {
title: 'Test',
icon: IconLayout,
},
})
</script>
<template>
<RouterView />
</template>This way still unable to use VueRouter({
extendRoute(route) {
// if (route.node.value.overrides?.remove) {
// route.parent.addToMeta(route.node.value.overrides.meta)
// route.delete()
// }
},
dts: 'src/typed-router.d.ts',
}), |
|
Just open a discussion with all the information. I personally don't understand what you are trying to do |
|
I use the above way to add metadata to the non-navigable parent nodes Just like this, i don’t know how to use imported
|
I see |
|
For anyone interested, I’d like to share my temporary workaround for this issue. In this example, you can add a Add the following to your async beforeWriteFiles(rootRoute) {
const forEachRoute = (
route: EditableTreeNode,
callback: (route: EditableTreeNode) => Promise<void>
) => {
callback(route)
if (route.children) {
route.children.forEach((childRoute: EditableTreeNode) => {
forEachRoute(childRoute, callback)
})
}
}
type ExtendRouteData = {
route: EditableTreeNode
data: any
}
const promises: Array<Promise<ExtendRouteData | null>> = []
const loadExtendedRoute = async (route: EditableTreeNode) => {
const pagesDir = fileURLToPath(new URL('./resources/pages', import.meta.url))
const routeFile = path.join(pagesDir, route.fullPath, 'route.js')
promises.push(
import(routeFile)
.then((module) => {
return { route: route, data: module.default }
})
.catch(() => null)
)
}
forEachRoute(rootRoute, async (route: EditableTreeNode) => {
if (route.isPassThrough) {
loadExtendedRoute(route)
}
})
await Promise.all(promises).then((results) => {
results.forEach((result) => {
if (result && result.data.meta) {
result.route.addToMeta(result.data.meta)
}
})
})
}This approach is not without its drawbacks. Since unplugin-router doesn't monitors the For now, this is a temporary fix, but hopefully, it will suffice until a more permanent solution becomes available.
const loadExtendedRoute = async (route: EditableTreeNode) => {
- const pagesDir = fileURLToPath(new URL('./resources/pages', import.meta.url))
+ const pagesDir = fileURLToPath(new URL('./src/pages', import.meta.url))
const routeFile = path.join(pagesDir, route.fullPath, 'route.js')
|
|
My previous temporary solution had some inconsistencies and bugs, which I've now fixed. I’d like to share the final version of this temporary workaround. In this approach, I recursively add metadata to the child routes to avoid any inconsistencies. However, changes to the route.js files are still not automatically detected, so the Vite dev server will need to be restarted for those changes to take effect. Add the following to your async beforeWriteFiles(rootRoute) {
const config = {
src: './resources/pages',
routeOverrideFile: 'route.js',
forcedRecursive: true
}
const iterateRoutes = (
route: EditableTreeNode,
callback: (route: EditableTreeNode) => Promise<void> | void
) => {
callback(route)
if (route.children) {
route.children.forEach((childRoute: EditableTreeNode) => {
iterateRoutes(childRoute, callback)
})
}
}
type ExtendRouteData = {
route: EditableTreeNode
data: any
}
const promises: Array<Promise<ExtendRouteData | null>> = []
const loadRouteGroupOverrides = async (route: EditableTreeNode) => {
const pagesDir = fileURLToPath(new URL(config.src, import.meta.url))
const routeFile = path.join(pagesDir, route.name, config.routeOverrideFile)
promises.push(
import(routeFile)
.then((module) => Object({ route: route, data: module.default }))
.catch(() => null)
)
}
iterateRoutes(rootRoute, async (route: EditableTreeNode) => {
if (route.isPassThrough) {
loadRouteGroupOverrides(route)
}
})
await Promise.all(promises).then((results: Array<ExtendRouteData | null>) => {
results.forEach((result) => {
if (!result) {
return
}
if (result.data.meta) {
if (config.forcedRecursive) {
// Simple fix for root ('/') route not passing their meta to children
iterateRoutes(result.route, (route: EditableTreeNode) => {
route.addToMeta(result.data.meta)
})
} else {
result.route.addToMeta(result.data.meta)
}
}
// Override other properties if needed
})
})
}I hope this proves helpful until a more permanent solution is available. |
Creating folders create routes and any file inside them becomes a nested route. This wasn't possible before v4.1 but now it makes sense to allow defining meta properties (mainly but also any other route property) at this level
This could maybe be achieved with a special file
users/__route.jsthat exports some properties like name, meta, etc (the same as in the<route>block)The text was updated successfully, but these errors were encountered: