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.
我在网上进行了搜索,但是找不到搜索结果中描述的此问题。谁能指出正确的方向,以在路线更改时如何引起路线的刷新/重新渲染?
怎么了
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:简单(但肮脏)的修复
The easy -but hacky and not recommended - way to solve this is to give your
<router-view />
a key property, e.g.: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.:替代方案:导航卫士
Alternatively you could also use
vue-router
s In-Component Navigation Guards to react to route changes:So you can't use navigation guards in components deeper within the hierarchy.
next()
, which gives you time to load the data necessary before your route is displayed.一些有用的资源
vue-router
github issuevue-router
component reuse on stackoverflow