How to pass data (array and number in this case) as a prop to another route in vue?

So i have a routing set up in my Vue application and i have a HomeView view and a CheckoutView view and i want to pass the data as a prop from HomeView ("/") to CheckoutView ("/checkout") but i cant find a way to do it since they have no connections. To be exact, i want to send the cart array and total value from HomeView to CheckoutView everytime user requests "/checkout" route.


const routes = [
    path: '/',
    name: 'home',
    component: HomeView,
    path: '/checkout',
    name: 'checkout',
    component: () => import('../views/CheckoutView.vue')


export default {
import productsData from '@/assets/products.json';

  name: 'HomeView',
  data() {
    return {
      products: [],
      cart: [],
      total: 0,
  created() {
    this.products = productsData;


export default {
  name: "CheckoutView",
  props: {
    cart: Array,
    total: Number

I obviously simplified the code to only essentials but to sum everything up: with every request to route "/checkout" i want the cart and total from HomeView to be sent as props to CheckoutView.


  • You can accomplish this easily with Vue 3. Based on your comments, it seems like you're looking for a straight forward solution without using state management tools like pinia or vuex. Here's what you can do: create a file called cart.js and put it inside a folder named store. Inside that file, handle all the logic related to your global cart state (using ref and reactive), then export it.

    Here is an example, cart.js

    import { reactive } from "vue";
    export const cart = reactive([]);
    export const addToCart = (item) => {

    You can now import this state logics from cart.js to any of your page components.

    Check this demo code