Vue路由器单页应用，页面是否应该重新加载？

Question

我有一个问题，我设置了 vue 路由器，它可以工作，但是我有一个问题，它是一个单页应用程序。当我单击链接时，页面正在重新加载，因此它不是真正的单页应用程序是吗？

这是我的 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 的预期行为吗？我认为它不会重新加载但会更改组件本身，如果我关闭历史模式并添加“#”...

Answer 1

当您要路由到特定路由器页面时，您需要使用<router-link> 而不是<a>：

在 HTML5 历史模式下，router-link 会拦截点击事件，使浏览器不会尝试重新加载页面。