Home > Article > Web Front-end > A brief analysis of how to refresh the current page in vue
How does vue refresh the current page? The following article will introduce to you several implementation methods of Vue refreshing the current page. I hope it will be helpful to you!
If you do operations such as adding/modifying/deleting etc. in a project, you usually need to refresh the data or refresh the current page.
(1) If the page is simple, just call the interface to refresh the data.
(2) If the page is complex, you need to call Multiple interfaces or notifying multiple sub-components to refresh can be done by refreshing the current page. Here are 3 ways to refresh the current page. Each method has different ideas and has its own advantages and disadvantages
Method 1 - Via location.reload and $router.go(0) methods
(a) Overview
Pass# Both ##location.reload and
$router.go(0) can achieve page refresh. It uses the browser refresh function, which is equivalent to pressing the
f5 key to refresh the page.
Advantages: Simple enough
: There will be blank pages and poor user experience good. [Related recommendations: vuejs video tutorial, web front-end development]
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
db71bb30709ba44a555bb4f052ca6598
8f6d5a544bbc0d98e0f297ef053f784d
b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
2f08987855a26388ab9a38e30934a1372cacc6d41bbb37262a98f745aa00fbf0
146d57f813875e80bb84efaf4ce0e0d12cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
* {padding:0;margin:0;}
.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}
.aside{ width:200px;background-color: #d3dce6; }
.main { flex: 1; }
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
ab509c080ec9f7ec77efedb1cdcd4bed
975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
3f1c4e4b6b16bbbd69b2ee476dc4f83a
//框架页
let Layout = {
created() {
console.log('框架页加载')
},
template: `
dc6dce4a544fdca2df29d5ac0ea9906b
dc6dce4a544fdca2df29d5ac0ea9906b左侧菜单16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906b975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
`
}
//首页
let Home = {
template: `
dc6dce4a544fdca2df29d5ac0ea9906b
首页
22288cd9d7ad1476f72c780b7d10a8f2刷新65281c5ac262bf6d81768915a4a77ac0
16b28748ea4df4d9c2150843fecfba68
`,
created() {
console.log('首页加载')
},
methods: {
onClick(){
// 通localtion.reload或者this.$router.go(0)实现整体刷新页面,会出现页面闪烁
// location.reload()
this.$router.go(0)
}
},
}
//路由配置
let router = new VueRouter({
routes: [
{path: '/', component: Layout, children:[
{path: '', component: Home}
]}
]
})
Vue.use(VueRouter)
//根组件
new Vue({
router,
el: '#app'
})
2cacc6d41bbb37262a98f745aa00fbf0
73a6ac4ed44ffec12cee46588e518a5e
Link
Method 2 - Via Blank Page
(a) OverviewThrough the
$router.replace method, jump to a blank page, and then call back to the previous page, it uses vue-router
Switching pages will destroy the page and create a new one
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script> <style> * {padding:0;margin:0;} .container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;} .aside{ width:200px;background-color: #d3dce6; } .main { flex: 1; } </style> </head> <body> <div id="app"> <router-view></router-view> </div> </body> <script> //框架页 let Layout = { created() { console.log('框架页加载') }, template: ` <div> <div>左侧菜单</div> <div><router-view></router-view></div> </div> ` } //首页 let Home = { template: ` <div> 首页 <button @click="onClick">刷新</button> </div> `, created() { console.log('首页加载') }, methods: { onClick(){ //使用replace跳转后不会留下 history 记录,并通过redirect传递当前页面的路径 this.$router.replace(`/blank?redirect=${this.$route.fullPath}`) } }, } //空白页面 let Blank = { created(){ console.log('空白页加载') //重新跳回之前的页面 this.$router.replace(this.$route.query.redirect) }, template: ` <div></div> ` } //路由配置 let router = new VueRouter({ routes: [ {path: '/', component: Layout, children:[ {path: '', component: Home} ]}, //配置空白页面的路由 {path: '/blank', component: Layout, children:[ {path: '', component: Blank} ]} ] }) Vue.use(VueRouter) //根组件 new Vue({ router, el: '#app' }) </script> </html>(c)Preview
Link
Method 3-Through provide and inject##(a) Overview
By 975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e## on the parent page #Add v-if control
to refresh the page by destroying and recreating the page, and useprovide and
inject to implement multi-level component communication. The parent page provides the
reload method through
provide, and the child page obtains the
reload method through
inject, and calls the method to refresh
Advantages
Disadvantages
: The implementation is slightly complicated, involvinginject communication between multi-level components, and v-if control component creation and destruction, and
$nextTickApplication of event loop
(b)Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script> <style> * {padding:0;margin:0;} .container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;} .aside{ width:200px;background-color: #d3dce6; } .main { flex: 1; } </style> </head> <body> <div id="app"> <router-view></router-view> </div> </body> <script> //框架页 let Layout = { template: ` <div> <div>左侧菜单</div> <!-- 通过v-if实现销毁和重新创建组件 --> <div><router-view v-if="isRouterAlive"></router-view></div> </div> `, created() { console.log('框架页加载') }, // 通过provide提供reload方法给后代组件 provide(){ return { reload: this.reload } }, data(){ return { isRouterAlive: true } }, methods: { async reload(){ this.isRouterAlive = false //通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件 await this.$nextTick() this.isRouterAlive = true } } } //首页 let Home = { template: ` <div> 首页 <button @click="onClick">刷新</button> </div> `, created() { console.log('首页加载') }, //通过inject获取祖先元素的reload方法 inject: ['reload'], methods: { onClick(){ this.reload() } }, } //路由配置 let router = new VueRouter({ routes: [ {path: '/', component: Layout, children:[ {path: '', component: Home} ]} ] }) Vue.use(VueRouter) //根组件 new Vue({ router, el: '#app' }) </script> </html>
(c)Preview
Link
(Learning video sharing:vuejs introductory tutorial, Basic programming video
)The above is the detailed content of A brief analysis of how to refresh the current page in vue. For more information, please follow other related articles on the PHP Chinese website!