Vuejs fill <component> with dynamic params in url

Question

I want to use routes.js for dynamic components that I send in params of urls. Like this:

let routes=[
    {
        path: "",
        component: LayoutDashboard,
        children: [
            {
                path: '',
                component: Dashboard
            },
            {
                path: '/:pageName/:subPageName',
                component: ()=>import('./pages/plugins/'+route.params.pageName+'/'+route.params.subPage)
            }
        ]
    }];

Vue.js version is 3

In above code, I can't use route.params.subPage or this.route.params.subPage.

How can I do it?

Of course I use like like below code. but it doesn't work.

let routes=[
{
    path: "",
    component: LayoutDashboard,
    children: [
        {
            path: '',
            component: Dashboard
        },
        {
            path: '/:pageName/:subPageName',
            component: Controller
        }
    ]
};

Controller.vue code is:

<template>
  <component :is="getCurrentComponent"/>
</template>

<script>
export default {
    data()
    {
        return {
            pageName:this.$route.params.pageName,
            subPageName:this.$route.params.subPageName
        }
    },
    created()
    {
        
    },
    methods:{
        getCurrentComponent()
        {
            return ()=>import("./plugins/"+this.pageName+"/"+this.subPageName);
        }
    }
}
</script>

Result of solution 2 is:

Red line content is that component.

Answer 1

I searched and found the answer.

We can use two ways:

Routes.js:

export const routes=[
    {
        path: "",
        component: LayoutDashboard,
        children: [
            {
                path: '',
                component: Dashboard,
                exact: true
            },
            {
                path: '/:pageName/:subPageName',
                component: Controller
            }
        ]
    }
];

Method 1 (Controller.vue):

<template>
  <component :is="currentComponent"/>
</template>

<script>    
export default {
    data()
    {
        return {
            pageName:this.$route.params.pageName,
            subPageName:this.$route.params.subPageName,
            currentComponent:null
        };
    },
    created()
    {
        this.loadComponent();
    },
    watch:{
        $route (to, from){
            this.pageName=to.params.pageName;
            this.subPageName=to.params.subPageName;
            
            this.loadComponent();
        }
    },
    methods:{
        loadComponent()
        {
            new Promise(resolve => {
                import("./plugins/"+this.pageName+"/"+this.subPageName).then((c) =>{
                    this.currentComponent=c.default;

                    resolve(c.default);
                }).catch(e=>{
                    console.log(e);
                })
            })
        }
    }
}
</script>

Method 2 (Controller.vue):

<template>
  <component :is="currentComponent"/>
</template>

<script>
import {defineAsyncComponent} from "vue";

export default {
    data()
    {
        return {
            pageName:this.$route.params.pageName,
            subPageName:this.$route.params.subPageName,
            currentComponent:null
        };
    },
    created()
    {
        this.loadComponent();
    },
    watch:{
        $route (to, from){
            this.pageName=to.params.pageName;
            this.subPageName=to.params.subPageName;
            
            this.loadComponent();
        }
    },
    methods:{
        loadComponent()
        {
            this.currentComponent=defineAsyncComponent(
                ()=>import("./plugins/"+this.pageName+"/"+this.subPageName)
            );
        }
    }
}
</script>