为什么浏览器在路由/ URL更改时显示缓存的Vue.js视图？

由静止oo发布于 2020-04-07 01:05:29

I have a homepage with <router-link> tags to views. It is a simple master/detail relationship where the Homepage is a catalogue of products and the Product detail page/view shows information on each item.

When I first launch the website and click on an item on the Homepage view (e.g. URL: http://localhost:8080/100-sql-server-2019-licence), the Product view gets loaded and the product detail loads fine.

If I then press the back button in the browser to return to the Homepage and then click on a different Product (e.g. URL: http://localhost:8080/101-oracle-12c-licence), the URL in the browser address bar changes but I get the previous product's information. Its lightning quick and no new network calls are done which means its just showing a cached page of the previous product. If I then hit the refresh button while on that page, the network call is made and the correct product information is displayed.

我在网上进行了搜索，但是找不到搜索结果中描述的此问题。谁能指出正确的方向，以在路线更改时如何引起路线的刷新/重新渲染？

zsed

2020-04-07 01:05:29

怎么了

vue-router will cache your components by default.
So when you navigate to the second product (that probably renders the same component as the first product), the component will not be instantiated again for performance reasons.

From the vue-router documentation:

For example, for a route with dynamic params /foo/:id, when we navigate between /foo/1 and /foo/2, the same Foo component instance will be reused.

简单（但肮脏）的修复

The easy -but hacky and not recommended - way to solve this is to give your <router-view /> a key property, e.g.:

<router-view :key="$route.fullPath" />

This will force vue-router to re-instantiate the view component every time the url changes.
However you will loose all performance benefits you would normally get from the caching.

干净修复：正确处理路线更改

The clean way to solve this problem is to react to the route-change in your component (mostly this boils down to moving ajax calls from mounted into a $route watcher), e.g.:

<script>
export default {
  data() {
    return {
      productDetails: null,
      loading: false
    };
  },
  watch: {
    '$route': {
      // with immediate handler gets called on first mount aswell
      immediate: true,
      // handler will be called every time the route changes.
      // reset your local component state and fetch the new data you need here.
      async handler(route) {
        this.loading = true;
        this.productDetails = null;
        try {
          // example for fetching your product data
          const res = await fetch("http://give.me.product.data/" + encodeURIComponent(route.params.id));
          this.productDetails = await res.json();
        } finally {
          this.loading = false;
        }
      }
    }
  }
};
</script>

替代方案：导航卫士

Alternatively you could also use vue-routers In-Component Navigation Guards to react to route changes:

<script>
export default {
  async beforeRouteUpdate (to, from, next) {
    // TODO: The route has changed.
    // The old route is in `from`, the new route in `to`.
    this.productData = await getProductDataFromSomewhere();

    // route will not change before you haven't called `next()`
    next();
  }
};
</script>

The downside of the navigation guards is that you can only use them directly in the component that the route renders.
So you can't use navigation guards in components deeper within the hierarchy.
The upside is that the browser will not view your site before you call next(), which gives you time to load the data necessary before your route is displayed.

一些有用的资源

静止oo

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3102
注册排名
2361