Load component/template depending on the route param vuejs

Question

I would like to ask if can I implement this on vuejs, so basically the code will load a page/template base on the param url. I've been searching for a while and can't get the results I need or maybe I'm just searching a wrong keyword.

My url is like this, so I just can't manually declare the url in my route because it is dynamic, fetch from the database.

path: '/user/page_type

Thank you very much!

export default {
    mounted () {
        if(this.$routes.params.page_type == "home"){
            // Load Homepage Here
            // ../../../page/HomePage.vue
        }
        else if(this.$routes.params.page_type == "speaker"){
            // Load Speakerpage Here
            // ../../../page/HomePage.vue
        }
        else if(this.$routes.params.page_type == 'html'){
            // Load HTML Page Here
            // ../../../page/HtmlPage.vue
        }
    }
}

Egor Stambakio · Accepted Answer · 2017-04-22 07:23:55Z

2

This is available out of the box within official addon vue-router.

Docs for your case: link

answered Apr 22, 2017 at 7:23

Egor Stambakio

18.2k5 gold badges37 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sydney Loteria Over a year ago

My scenario is it will render different component based on params. Not the same component

Egor Stambakio Over a year ago

Then in your /user/ component you can insert <component :is="getComponent"></component> and in script set watch: { '$route': { ... like described here router.vuejs.org/en/essentials/dynamic-matching.html (Reacting to Params Changes). In method getComponent you can return desired component name.

Sydney Loteria Over a year ago

do you have any example for this <component :is="getComponent"></component> I'm quite didn't understand. would you mind to share some links that I can check?

Egor Stambakio Over a year ago

Example: jsfiddle.net/wostex/yLu0uza8/2 . Dynamic components: vuejs.org/v2/guide/components.html#Dynamic-Components

Sydney Loteria Over a year ago

You're the best Man!. This is what I'm looking for. Thank you very much!

Collectives™ on Stack Overflow

Load component/template depending on the route param vuejs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related