溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue中如何刷新當前頁面的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue中如何刷新當前頁面文章都會有所收獲，下面我們一起來看看吧。
項目當中如果做新增/修改/刪除等等操作通常情況下都需要刷新數據或者刷新當前頁面.
(1)如果頁面簡單,調用接口刷新數據即可.
(2)如果頁面復雜,需要調用多個接口或者通知多個子組件做刷新,可以采用刷新當前頁面的方式 下面整理了3種方式來實現刷新當前頁面,每種方式的思路不同,各有優缺點
方式1-通過location.reload和$router.go(0)方法
(a)概述
通過location.reload和$router.go(0)都可以實現頁面刷新,它利用瀏覽器刷新功能,相當于按下了f5鍵刷新頁面
優點:足夠簡單
缺點:會出現頁面空白,用戶體驗不好。
(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(){
// 通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'
})
</script>
</html>
方式2-通過空白頁面
(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>
方式3-通過provide和inject
(a)概述
通過在父頁面的<router-view></router-view>上添加v-if的控制來銷毀和重新創建頁面的方式刷新頁面,并且用到provide和inject實現多層級組件通信方式,父頁面通過provide提供reload方法,子頁面通過inject獲取reload方法,調用方法做刷新
優點:不會出現頁面空白,地址欄會不會出現快速切換的過程,用戶體驗好
缺點:實現稍復雜,涉及到provide和inject多層級組件間的通信,和v-if控制組件創建和銷毀,和$nextTick事件循環的應用
(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 = {
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>
關于“vue中如何刷新當前頁面”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue中如何刷新當前頁面”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
