Defining options for routes without a component

[posva]

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.js that exports some properties like name, meta, etc (the same as in the <route> block)

Currently it's possible to create a nested route thanks to groups:

• /pages/(my-group).vue
• /pages/(my-group)/users.vue

The (my-group).vue allows to define common options:

<script setup lang="ts">
definePage({})
</script>

<template>
  <RouterView />
<template>

unfortunately, it creates a name for the route. Using a special file would allow to:

• use a plain js/ts file
• Not create a name by default

---

I'm tracking here these issues:

• define loaders from a route without a component (_route.ts) #546
• Allow defining route options when there is no component #318

[Soviut]

This would be nice for applying meta: { requiresAuth: true } to a parent route. Currently, I'm having to use definePage on every child page.

[jods4]

Here we're building our navigation menus from the routes table (using metadata added in route blocks).
We'd like to add metadata to the non-navigable parent nodes, too.

We used the following hack to work-around this:

1. Create an empty index.vue page anyway, with a <route> block and metadata.
2. In the metadata, include a marker that the page must be removed, e.g. "remove": true.
3. We use the extendRoute(route) callback during build to customize the process a bit:

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.
It would be nice to have this built-in though, maybe as the default export of __route.js as suggested initially; or __route.json and __route.yaml for syntax consistency with <route> blocks.

Random remark: route.node is described as a private variable in code, yet there is no access to overrides object from EditableTreeNode. I feel like one public API is missing?

[posva]

Thanks for sharing your approach!
I'm realizing this is quite old now and I haven't implemented any experimental APIs around it yet... I hope to get back to it after #246 and the Data Loaders RFC

Random remark: route.node is described as a private variable in code, yet there is no access to overrides object from EditableTreeNode. I feel like one public API is missing?

Yes, EditableTreeNode is definitely still missing some APIs but also docs and examples 😅

[all-in-vue]

Here we're building our navigation menus from the routes table (using metadata added in route blocks). We'd like to add metadata to the non-navigable parent nodes, too.

We used the following hack to work-around this:

1. Create an empty index.vue page anyway, with a <route> block and metadata.
2. In the metadata, include a marker that the page must be removed, e.g. "remove": true.
3. We use the extendRoute(route) callback during build to customize the process a bit:

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. It would be nice to have this built-in though, maybe as the default export of __route.js as suggested initially; or __route.json and __route.yaml for syntax consistency with <route> blocks.

Random remark: route.node is described as a private variable in code, yet there is no access to overrides object from EditableTreeNode. I feel like one public API is missing?

Called like this, vscode does not report an error
route["node"].value.overrides.remove

[a81n9]

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.js that exports some properties like name, meta, etc (the same as in the <route> block)

@posva
I don't know how to configure the __route.js file
This kind of scene is too common
Can you provide a demo?

[jods4]

@AAABingBing This issue is open, there is no support for __route.js (or any other alternative) built into this library yet.
Look at my comment above for an alternative using extendRoute() to implement this feature in your code.

[a81n9]

@AAABingBing This issue is open, there is no support for __route.js (or any other alternative) built into this library yet. Look at my comment above for an alternative using extendRoute() to implement this feature in your code.

Oh, I see
Thank you for your reply

[a81n9]

Here we're building our navigation menus from the routes table (using metadata added in route blocks). We'd like to add metadata to the non-navigable parent nodes, too.

We used the following hack to work-around this:

1. Create an empty index.vue page anyway, with a <route> block and metadata.
2. In the metadata, include a marker that the page must be removed, e.g. "remove": true.
3. We use the extendRoute(route) callback during build to customize the process a bit:

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. It would be nice to have this built-in though, maybe as the default export of __route.js as suggested initially; or __route.json and __route.yaml for syntax consistency with <route> blocks.

Random remark: route.node is described as a private variable in code, yet there is no access to overrides object from EditableTreeNode. I feel like one public API is missing?

This method solves my problem, but I have another question
Using definePage configuration, unable to use route.node.value.overrides to access route information
But in some cases I have to use the definePage configuration route information

Such as:

In this case, I cannot use the route block to configure