【问题标题】:Sometimes a vue router-link refreshes / reloads the page. Sometimes it doesn't有时 vue 路由器链接会刷新/重新加载页面。有时它不会
【发布时间】:2020-01-02 22:25:46
【问题描述】:

在我的主页的“itemcarousel”上单击某些路由器链接时,我注意到一些奇怪的行为:

http://www.leefschooldewonderwijzer.be

当您只需单击第一个轮播项目(带放大镜的女孩)时,无需刷新浏览器即可加载相应的页面。但是,当您首先单击向左箭头(因此项目向右滑动)然后相同项目时,浏览器首先刷新/重新加载。

我检查了 HTML,点击箭头后实际链接实际上没有任何变化:

<a href="/article/33" class="inneritem" style="background-image: url(&quot;http://wonderwijzer.fast-focus.be/uploads/wonderwijzer/imageasset/source/11/version_500x500_bigstock--140862161.jpg&quot;); background-position: initial initial; background-repeat: initial initial;" tabindex="0"><h2 class="itemtitle">
              Buitenonderwijs
            </h2></a>

有人知道为什么会这样吗?我对其他一些链接也有同样的行为。

=> "in de kijker" 下的第二条新闻。当你点击“lees meer”=> 刷新时

一些路线正确打开,其他路线进行了不必要的刷新。

更新

这一定与历史模式有关。当我部署网站时 使用哈希模式,它可以正常工作。我使用 Nginx 作为网络服务器。服务器配置有问题吗?

server {
  listen 80;

  gzip on;
  gzip_http_version 1.1;
  gzip_vary on;
  gzip_comp_level 6;
  gzip_proxied any;

  root /webroot/wonderwijzer.be;
  index index.html;

  server_name 
  leefschooldewonderwijzer.be 
  www.leefschooldewonderwijzer.be;

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

  location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    # Some basic cache-control for static files to be sent to the browser
    expires max;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
  }

}

【问题讨论】:

    标签: javascript vue.js nginx vue-router


    【解决方案1】:

    使用 vue 路由器标签代替 a 标签

    <router-link to="/article/33"> Buitenonderwijs </router-link> 
    

    这将加载视图而不重新加载网站

    【讨论】:

    • 实际上,我已经在我的代码中这样做了。所以这不是解决方案。 {{ car​​ouselitem.text.value_nl }}
    猜你喜欢
    • 2019-07-29
    • 2013-01-31
    • 2018-07-04
    • 2016-06-26
    • 2020-05-08
    • 2020-07-27
    • 2012-01-09
    • 2019-01-16
    • 2019-01-08
    相关资源
    最近更新 更多