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

Trouble getting search filter to function properly on an array of objects in a Vue JavaScript application

The duplication of th in the tr tag is functioning correctly for all other objects in the v-for loop

Oops! Looks like there was a mistake. The parameter `uri` in the function `openUri()` needs to be a string, but it seems to

Utilizing AngularJS to dynamically bind input to a value with a filter and keep it updated

The client sent a risky Request.Path value that raised red flags

Align the rotation of Object3D at the tab level

Stream of information that triggers a specific action based on a specified condition

Open multiple accordion sections simultaneously

The act of sending back Null from the Array.map() function

Issue with using Javascript variables within Highcharts

How to choose an item from a dropdown list using its item number with jQuery

Checking and merging arrays in Javascript

Tips for automating the execution of Chrome extension code on pages with infinite scrolling

Issue with xsl:include functionality in a Firefox extension

Adjust Text to Perfectly Fit Button

Accordion feature that loads JSON data dynamically with AJAX

Passing the socket.io instance to an express route

Discovering elements using Selenium in a JavaScript popup box

How to Implement Autoplay Feature in YouTube Videos with React

Navigating the complexities of managing group radio buttons in React JS within a functional component