Having a variable passed through page reload

[Kronos9326]

Our dev coded us an account page that serves multiple purposes on the same page using v-if and v-show, but I'm stuck.

the main screen loads by default. When you click on orders it runs this '@click.prevent="accountView = 'orders'" and then the other sections disappear and the orders screen shows using this code: <section class="orders" v-if="accountView == 'orders'"> where the orders screen will show...

But sadly, when you click to page two, there's a page refresh and we're back to the main screen. If you click on orders, it will then show the orders like normal, but with page 2 instead.

Is there a way to have a variable pass through and survive a page load so that the orders screen will display when it's clicked.

<section class="account" v-if="accountView == 'dashboard'">
  <div class="container">
    <div class="max">
      <div class="grid">
        <div class="block"><a href="/account/addresses" class="inside">
            <div class="icon person"></div>
            <div class="title">My Account</div>
            <div class="text">Access and edit account infomation</div></a></div>
        <div class="block"><a href="/apps/downloads/orders/{{ customer.id }}" class="inside">
            <div class="icon tutorials"></div>
            <div class="title">My Tutorials</div>
            <div class="text">Access and play purchased digital content</div></a></div>
        <div class="block"><a href="/pages/orders" class="inside"  .prevent="accountView = 'orders'"> 
            <div class="icon orders"></div>
            <div class="title">My Orders</div>
            <div class="text">Access your Ellusionist order history</div></a></div>
        <div class="block"><a href="/pages/wishlist" class="inside">
            <div class="icon wish"></div>
            <div class="title">My Wishlist</div>
            <div class="text">Access your saved-for-later products</div></a></div>
      </div>
      <div class="grid hend-xs"><a href="/account/logout" class="btn center"><span>Log Out</span></a></div>
    </div>
  </div>
</section>

<section style="background: rgb(46, 43, 40);" class="cta" v-if="accountView == 'dashboard'">
  <div class="container">
    <div class="max">

      CONTENT GOES HERE

    </div>
  </div>
</section>

<section class="orders" v-if="accountView == 'orders'">
  <div class="container-fluid">
    <div class="grid">
      <div class="col-2-md">
        <a href="/account" class="back" .prevent="accountView = 'dashboard'">Back</a>
      </div>
    </div>
    <div class="grid hcenter-xs">
      <div class="col-24-md">
        <h1>My Orders</h1>

        {% if customer.orders.size != 0 %}
        {% paginate customer.orders by 20 %}

        ORDER HTML GOES HERE

        {% if paginate.pages > 1 %}
        <div class="pagination">
          {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
        </div>
        {% endif %}
        {% endpaginate %}
        {% else %}
          <br/><br/>There are no orders yet.
        {% endif %}

      </div>
    </div>
  </div>
</section>

 The code above shows how it's done, but for the life of me I can't figure out how to achieve what I'm looking for without breaking the orders page out to a different page.