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

Posted 2023-02-22

技术标签:

【中文标题】Vue路由器单页应用，页面是不是应该重新加载？【英文标题】：Vue router single page app, should the page reload?Vue路由器单页应用，页面是否应该重新加载？ 【发布时间】：2018-05-24 19:21:03 【问题描述】：

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

【问题讨论】：

你是对的，它不应该重新加载。你见过这个（服务器配置部分）：router.vuejs.org/en/essentials/history-mode.html 【参考方案1】：

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