Utilizing the Vue feature of dynamic route naming within a component's function

Question

Utilizing the Vue feature of dynamic route naming within a component's function

Currently, I am working on creating a dynamic view rendering using Vue and Laravel. However, I am facing difficulty in understanding how to pass the dynamic parameter to the component function.

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

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

After going through several documentations, I have learned that $route can solve this issue. I can incorporate $route into the view and display the text on the page. But I'm struggling to use $route within the map function to retrieve the dynamic name?

For instance, if I input "/cms-admin/dashboard", 'dashboard' should be extracted for the template parameters.

Thank you in advance, Steven

javascript vue.js vue-router

Answer 1

Answer №1

Make sure to register the individual templates for each page as partials in Vue.js version 1 or version 2
Utilize the <partial> component and access $route

Javascript:

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

Note: It is uncertain whether you can access this.$route in the data() function, so I used the ready() event instead. You may be able to directly assign it in the data() function.

Answer 2

Make sure to register the individual templates for each page as partials in Vue.js version 1 or version 2
Utilize the <partial> component and access $route

Javascript:

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

Note: It is uncertain whether you can access this.$route in the data() function, so I used the ready() event instead. You may be able to directly assign it in the data() function.

Utilizing the Vue feature of dynamic route naming within a component's function

Answer №1

Similar questions

The div element is not adjusting its size according to the content it

Display a tooltip for ever-changing content

Guide on updating individual rows in Google App Script using data from a different sheet

Encountering Axios errors while executing API calls at a high frequency

Activating view loading in AngularJS through child window authentication (OAuth)

JSplumb - retrieve a connection targeting a particular endpoint

Adapting the position of a table row in AngularJS based on the

Issue with the positioning of bootstrap popover after content is added

What prevents variables defined in outer blocks from being accessed by nested describe() blocks?

resolving conflicts between Rails and JavaScript assets

Specify the return type based on specific parameter value

The error message states: `res.Send function is not recognized as a valid

Unselecting tabs in Vuetify

Mapping two arrays in JavaScript involves iterating through each element of the arrays

Tips for setting up a select dropdown in AngularJS using ng-options when the value is an object

A guide on how to effectively simulate a commonJS module that has been imported in

The React application is being continuously accessed by a node.js server and processed within async functions

Should we pass <script> tags or unsanitized values to the Handlebars layout?

Is it possible to retrieve text from various iframes using the rangy library?

When using NodeJS with expressJS, remember that req.body can only retrieve one variable at a