vitailse icon indicating copy to clipboard operation
vitailse copied to clipboard

Dynamic Routing with props don't work properly

Open leonardobravi opened this issue 2 years ago • 1 comments

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?

leonardobravi avatar Nov 01 '22 15:11 leonardobravi