Одностраничное приложение Vue router, должна ли страница перезагрузиться?

У меня есть вопрос, я настроил Vue Router, который работает, однако у меня есть вопрос о том, как это одностраничное приложение. Когда я нажимаю на ссылку, страница перезагружается, поэтому на самом деле это не одностраничное приложение, не так ли?

Вот моя конфигурация nginx:

# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/webuilder.co.uk/before/*;

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name webuilder.co.uk;
    root /home/forge/webuilder.co.uk/current;

    # FORGE SSL (DO NOT REMOVE!)
    ssl_certificate /etc/nginx/ssl/webuilder.co.uk/279163/server.crt;
    ssl_certificate_key /etc/nginx/ssl/webuilder.co.uk/279163/server.key;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-$
    ssl_prefer_server_ciphers on;
    ssl_dhparam /etc/nginx/dhparams.pem;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    # FORGE CONFIG (DOT NOT REMOVE!)
    include forge-conf/webuilder.co.uk/server/*;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;

Маршруты:

import Create from '../vue/components/homepage/create.vue';
import How from '../vue/components/homepage/how.vue';
import About from '../vue/components/homepage/about.vue';
import Youtube from '../vue/components/homepage/youtube.vue';
import Login from '../vue/components/auth/login.vue';
import Register from '../vue/components/auth/register.vue';

export default [
    { path: '/', component: Create },
    { path: '/how', component: How },
    { path: '/about', component: About},
    { name: 'youtube', path: '/youtube', component: Youtube},
    { path: '/login', component: Login},
    { path: '/register', component: Register},
];

Vue.use(VueRouter);
Vue.component('homenav', Navigation);
Vue.component('mainav', Navigation2);

const router = new VueRouter({
  mode: 'history',
  routes: Router
});

new Vue({
  el: '#nav',
  data: {
    nav: 'homeNav'
  },
  methods: {
    switchNav: function (nav) {
      this.nav = nav;
    }
  }
});

new Vue({
  el: '#app',
  router,
  updated: function () {
    Pace.restart()
  },
});

и это можно увидеть по адресу:

https://webuilder.co.uk/

Может кто-то просто объяснить и уточнить, является ли это ожидаемым поведением SPA? Я думал, что это не перезагрузит, но изменит сам компонент, который это делает, если я выключаю режим истории и добавляю '#'...

1 ответ

Решение

Вам нужно использовать <router-link> вместо <a> когда вы хотите направить на конкретную страницу маршрутизатора:

В режиме истории HTML5 ссылка на маршрутизатор будет перехватывать событие click, чтобы браузер не пытался перезагрузить страницу.

Другие вопросы по тегам