SPA VueJS page without reload, how to do?

Question

Vue.js

Hello, I started to delve into vuejs and decided to make a SPA on the lara. There are two routes home, test. They have the same component, but when I go to another page, the component disappears, but the dom is updated.

Here is the component template:

<div class="row invisible" data-toggle="appear">
        <div class="col-6 col-xl-3">
            <a class="block block-rounded block-bordered block-link-shadow" href="javascript:void(0)">
                <div class="block-content block-content-full clearfix">
                    <div class="float-right mt-15 d-none d-sm-block">
                        <i class="si si-bag fa-2x text-primary-light"></i>
                    </div>
                    <div class="font-size-h3 font-w600 text-primary" data-toggle="countTo" data-speed="1000" data-to="1500">0</div>
                    <div class="font-size-sm font-w600 text-uppercase text-muted">Sales</div>
                </div>
            </a>
        </div>
    </div>

Answer 1

The transition takes place <router-link>on

Answer 2

You need to do everything in 1 lara route. In it, give Vue , but inside Vue, already walk along the routes. I will give an example of what you get in the URL:
The route on which Vue is given is localhost/home
The route of Vue itself is localhost/home/test
i.e. the localhost/home part doesn’t go anywhere anymore, it’s the root of your SPA, but in general, while you’re doing it in Dev, change the link mode so that Vue routes are through #, so it will be easier for you to understand where you are, in Lara or Vue routes
Although it’s strange that router link reloads the page for you