vitailse
vitailse copied to clipboard
Dynamic Routing with props don't work properly
I tried to use dynamic routes with parameters but I noticed that these are not passed as properties to the component, so I noticed that on the automatically generated routes the word props: true
is never present, I also tried to add it in the <route>
section of the page but despite this the routes are created without props.
I activated the logs and this is what they say:
🤖 Scanning files in C:/.../myproject/src/pages
added "example.vue" for "C:/.../myproject/src/pages/example.vue"
{ name: 'example' }
added "editor/index.vue" for "C:/.../myproject/src/pages/editor/index.vue"
{ name: 'editor', props: true }
added "index.vue" for "C:/.../myproject/src/pages/index.vue"
{ name: 'home' }
added "other-page.vue" for "C:/.../myproject/src/pages/other-page.vue"
{ name: 'other-page' }
added "[...all].vue" for "C:/.../myproject/src/pages/[...all].vue"
{ name: 'not-found', meta: { layout: 404 } }
added "editor/[templateId].vue" for "C:/.../myproject/src/pages/editor/[templateId].vue"
{ name: 'editor-template', props: true }
writing
<index>
├── example 📄(default)
├── editor
│ ├── <index> 📄(default)
│ └── :templateId 📄(default)
├── <index> 📄(default)
├── other-page 📄(default)
└── :all(.*) 📄(default)
this is the error I get in the component:
[Vue warn]: Missing required prop: "templateId"
at <[templateId] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
and in fact in the props the value of templateId
is undefined
.
This is what comes finally inside the object router.options.routes
:
[
{
"component": () => import("/src/pages/index.vue"),
"path": "/",
"name": "home"
},
{
"component": () => import("/src/pages/[...all].vue"),
"path": "/:all(.*)",
"name": "not-found",
"meta": {
"layout": 404
}
},
{
"path": "/editor",
"children": [
{
"component": () => import("/src/pages/editor/index.vue"),
"path": "",
"name": "editor"
},
{
"component": () => import("/src/pages/editor/[templateId].vue"),
"path": ":templateId",
"name": "editor-template"
}
]
},
{
"component": () => import("/src/pages/example.vue"),
"path": "/example",
"name": "example"
},
{
"component": () => import("/src/pages/other-page.vue"),
"path": "/other-page",
"name": "other-page"
}
]
I can't understand, could the problem lie with the SSR? In case, since I don't need it how do I turn it off?