SPA VueJS страница без перезагрузки, как сделать?

Question

[Qu1eeeOJ]

Здравствуйте, начал вникать vuejs и решил сделать SPA на ларе. Есть два роута home, test. На них один и тот же компонент, но когда перехожу на другую страницу, компонент пропадает, но dom обновляется.

Вот 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

[Владимир Боруткин]

Переход происходит по<router-link>?

Comments

[Qu1eeeOJ]

Да

<router-link :to="{ name: 'test' }"><i class="si si-cup"></i><span class="sidebar-mini-hide">Test</span></router-link>

Answer 2

[ettychel]

Вам нужно сделать всё в 1 роуте лары. В нем отдадите Vue , а вот внутри Vue уже ходите по роутам. Приведу пример , что получится у вас в URL:
Роут на котором отдается Vue - localhost/home
Роут уже самого Vue - localhost/home/test
т.е. часть localhost/home уже никуда не девается, это корень вашего SPA, а вообще пока в деве делаете, поменяйте режим ссылок, чтобы роуты Vue были через #, так вам проще будет понимать где вы находитесь, в роутах Лары или Vue
Хотя странно, что router link перезагружает вам страницу

Comments

[Qu1eeeOJ]

Именно так я и делаю

[ettychel]

Qu1eeeOJ, честно говоря давно не делал это силами Лары, поэтому не совсем точно помню как это там делается. Последнее время только nuxtjs.
Посмотрите лучше в конфиг роутера Vue, скорее всего там косяк