Sharing values across all routes using router-view

Question

Sharing values across all routes using router-view

I have data for currency and I would like to share this data with all views without having to call the same function in each view.

My solution was to call the function in App.vue (my main view), but I am struggling to figure out how to pass it along with router-view.

Code

HTML

<template>
  <el-container :is="layout">
    <transition name="fade">
      <router-view id="content" :key="$route.fullPath"></router-view>
    </transition>
  </el-container>
</template>

Script

export default {
    data() {
      return {
        isCollapse: true,
        user: '',
        type: '',
        site_name: process.env.MIX_APP_NAME
      }
    },
    created () {
      this.getCurrency()
    },
    methods: {
      getCurrency() {
        axios
        .get('/api/currencyDefault')
        .then(response => {
          this.currency = response.data.data
        })
        .catch(function (error) {
          console.log('error', error);
        });
      },
    }
}

Any insights on how to solve this?

javascript vue.js vuejs2

Answer 1

Answer №1

If you want to transfer that currency to the router view, you can achieve it by following these steps:

    <template>
      <el-container :is="layout">
        <transition name="fade">
           <router-view :currency="currency"id="content" :key="$route.fullPath"></router-view>
        </transition>
      </el-container>
    </template>

export default {
    data() {
        return {
            isCollapse: true,
            user: '',
            type: '',
            site_name: process.env.MIX_APP_NAME
        }
    },
    created () {
        this.getCurrency()
    },
    methods: {
        getCurrency() {
            axios
            .get('/api/currencyDefault')
            .then(response => {
                this.currency = response.data.data
            })
            .catch(function (error) {
                console.log('error', error);
            });
        },
    }
}

Now, in your other view, you can access it using props like this:

export default {
    props:['currency']
}

However, a downside of this method is that if you have nested child components and still need to access the currency data, you'll end up passing props multiple times to different router views which can become cumbersome. My suggestion would be to use Vuex instead. This way, the currency data will be accessible across all your views.

Refer to the documentation here for more information on Vuex.

Answer 2

If you want to transfer that currency to the router view, you can achieve it by following these steps:

    <template>
      <el-container :is="layout">
        <transition name="fade">
           <router-view :currency="currency"id="content" :key="$route.fullPath"></router-view>
        </transition>
      </el-container>
    </template>

export default {
    data() {
        return {
            isCollapse: true,
            user: '',
            type: '',
            site_name: process.env.MIX_APP_NAME
        }
    },
    created () {
        this.getCurrency()
    },
    methods: {
        getCurrency() {
            axios
            .get('/api/currencyDefault')
            .then(response => {
                this.currency = response.data.data
            })
            .catch(function (error) {
                console.log('error', error);
            });
        },
    }
}

Now, in your other view, you can access it using props like this:

export default {
    props:['currency']
}

However, a downside of this method is that if you have nested child components and still need to access the currency data, you'll end up passing props multiple times to different router views which can become cumbersome. My suggestion would be to use Vuex instead. This way, the currency data will be accessible across all your views.

Refer to the documentation here for more information on Vuex.

Answer 3

Answer №2

If you want to transfer props to the router view and have them passed down to the child component, there is a helpful solution on Stack Overflow that addresses this issue: How to pass data to a router-view in Vue.js

<router-view :currency="currency"></router-view>

It's essential to note one potential problem with your code - by setting this.currency in your API call, you're inadvertently overwriting another method with the same name. It might be beneficial to consider renaming your method to getCurrency.

methods: {
  getCurrency () {
    axios
    .get('/api/currencyDefault')
    .then(response => {
      this.currency = response.data.data
    })
    .catch(function (error) {
      console.log('error', error);
    });
  },
}

Answer 4

If you want to transfer props to the router view and have them passed down to the child component, there is a helpful solution on Stack Overflow that addresses this issue: How to pass data to a router-view in Vue.js

<router-view :currency="currency"></router-view>

It's essential to note one potential problem with your code - by setting this.currency in your API call, you're inadvertently overwriting another method with the same name. It might be beneficial to consider renaming your method to getCurrency.

methods: {
  getCurrency () {
    axios
    .get('/api/currencyDefault')
    .then(response => {
      this.currency = response.data.data
    })
    .catch(function (error) {
      console.log('error', error);
    });
  },
}

Sharing values across all routes using router-view

Code

Answer №1

Answer №2

Similar questions

Running several setInterval functions on a Node server

What is the reason AJAX does not prevent page from refreshing?

The issue of uploading files using Ajax in CodeIgniter and Jquery is causing problems

Is there a way to expand a pie chart into a new pie chart with PHP and Javascript?

How to eliminate spacing between photos in a flexbox layout

Tips for reducing unwanted messages on a form

The File Reader just informed me that parameter 1 is not in the form of a blob

What is the best way to incorporate a loading icon onto a webpage that exclusively runs JavaScript functions?

Recently added classes are not exhibiting the same behavior as the ones loaded during DOM ready

Is there a way to determine whether the uploaded file has been altered?

Adding markers to a Leaflet map using coordinates retrieved from a Supabase database - a step-by-step guide

What is the best way to create a DOM element listener in AngularJS?

`Switching from Fetch to Axios: A step-by-step guide`

Utilize AJAX to extract JSON data

Concerns about security arise when sending an access token through a POST request

Is there a specific identifier in the user agent string for Edge in Windows 10 S? Are there alternative methods to automatically identify Windows 10 S

How can I showcase images stored in an array using JavaScript?

What is the best way to display a nested JSON object structure?

What is the best way to pass the output of one grunt task to another grunt task?

Issues with 'md-sidenav' in AngularJs failing to respond to click event in Firefox