淺析vue中怎麼刷新目前頁面
- 青灯夜游轉載
- 2023-01-14 19:24:082578瀏覽
vue怎麼刷新目前頁面？以下這篇文章為大家介紹一下vue刷新目前頁面的幾種實作方法，希望對大家有幫助！
專案當中如果做新增/修改/刪除等等操作通常情況下都需要刷新資料或刷新目前頁面.
##思路
- (1)如果頁面簡單,呼叫介面刷新資料即可.
- (2)如果頁面複雜,需要調用多個介面或通知多個子元件做刷新,可以採用刷新目前頁面的方式 下面整理了3種方式來實現刷新當前頁面,每種方式的思路不同,各有優缺點
#實作
方式1-透過location.reload和$router.go(0)方法
#(a)概述
透過location.reload和$router.go(0)都可以實現頁面刷新,它利用瀏覽器刷新功能,相當於按下了f5鍵刷新頁面
(b)程式碼##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
連結
-
##(a)概述
-
透過$router.replace方法,跳轉一個空白頁面,然後再調回之前頁面,它利用
vue-router 切換頁面會把頁面銷毀並新新頁面的功能
#優點
:不會出現頁面空白,使用者體驗好
缺點:網址列會出現快速切換的程序
(b)代碼
<!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)預覽
連結方式3-透過provide和inject(a)概述透過在父頁的975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e上新增
- 來銷毀和重新建立頁面的方式刷新頁面,並且用到
- provide
和inject實作多層級元件通訊方式,父頁面透過
provide 提供 - reload
方法,子頁面透過inject取得
reload方法,呼叫方法做刷新#優點:不會出現頁面空白,網址列會不會出現快速切換的過程,使用者體驗好
##缺點:實作稍微複雜,涉及到provide
和inject多層級元件間的通訊,和v-if
控制元件建立和銷毀,和$nextTick事件循環的應用程式
<!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)預覽#### #########連結#########（學習影片分享：###vuejs入門教學###、###程式設計基礎影片###）###以上是淺析vue中怎麼刷新目前頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！