Using Vue dynamic route name, in component function

Question

I've been trying to make a dynamic view rendering, with Vue and Laravel. However, i can't wrap my head around how i am supposed to parse the dynamic parameter, to the component function.

Router.map({
    '/cms-admin/:page': {
        component: {
            template: returnView(this.$route.params.page)
        }
    }
});

function returnView (option) {
    // Generate the AJAX request here
}

Through documentations i've read, that $route should solve the issue. I can parse $route into the view, and print the text on the page. However, i can't use $route inside the map, to get the dynamic name?

Say, i enter "/cms-admin/dashboard", 'dashboard' should get parsed down to the template parameters.

Thanks in advance, Steven

tony19 · Accepted Answer · 2022-07-15 21:01:00Z

5

register the individual templates for the pages as partials v1 v2
use <partial> and $route

js:

component: {
  template: '<partial :name="partial" v-if="partial !== ''"></partial>',
  data() { return { partial: '' } },
  ready() { this.partial = this.$route.params.page},
}

Note: Not sure whether you can access this.$route in data(), therefore I used the ready() event, but maybe you can drop that and put it directly in data().

edited Jul 15, 2022 at 21:01

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 19, 2016 at 22:42

Linus Borg

24.1k7 gold badges65 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Using Vue dynamic route name, in component function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related