vue에서 현재 페이지를 새로 고치는 방법은 무엇입니까? 다음 기사에서는 현재 페이지를 새로 고치는 Vue의 여러 구현 방법을 소개합니다. 도움이 되길 바랍니다.
프로젝트에서 추가/수정/삭제 등의 작업을 수행하는 경우 일반적으로 데이터를 새로 고치거나 현재 페이지를 새로 고쳐야 합니다.
(1) 페이지의 경우 간단합니다. 인터페이스를 호출하여 데이터를 새로 고치면 됩니다.
(2) 페이지가 복잡하고 여러 인터페이스를 호출하거나 여러 하위 구성 요소에 새로 고침을 알려야 하는 경우 현재 페이지를 새로 고칠 수 있습니다. 다음은 현재 페이지를 새로 고치는 3가지 방법입니다. 각 방법에는 서로 다른 아이디어가 있고 고유한 장점과 단점이 있습니다.
방법 1 - location.reload 및 $router.go(0) 방법을 통해
(a) 개요
페이지 새로 고침은 브라우저 새로 고침 기능을 사용하는 location.reload 및 $router.go(0)를 통해 수행할 수 있습니다. , f5 키를 눌러 페이지를 새로 고치는 것과 같습니다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>(c)预览
方式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>(c)预览
方式3-通过provide和inject
(a)概述
通过在父页面的<router-view></router-view>上添加v-if的控制来销毁和重新创建页面的方式刷新页面,并且用到provide和inject实现多层级组件通信方式,父页面通过provide提供reload方法,子页面通过inject获取reload方法,调用方法做刷新
优点:不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验好
缺点:实现稍复杂,涉及到provide和inject多层级组件间的通信,和v-if控制组件创建和销毁,和$nextTick
: 충분히 간단합니다
단점: 예 페이지가 비어 있고 사용자 경험이 좋지 않습니다. [관련 권장사항: vuejs 비디오 튜토리얼
, 웹 프론트 엔드 개발(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>$router.replace 메서드를 사용하여 빈 페이지로 이동한 다음 이전 페이지는 vue-router를 사용합니다. 페이지를 전환하면 페이지가 삭제되고 새 페이지가 생성됩니다🎜🎜🎜🎜장점🎜: 있음 빈 페이지가 없을 것, 좋은 사용자 경험🎜🎜🎜🎜🎜단점🎜: 주소 표시줄에서 빠른 전환 프로세스가 있을 것입니다🎜🎜🎜🎜🎜(b) Code🎜🎜rrreee🎜🎜(c) Preview🎜🎜🎜링크 🎜🎜🎜 🎜🎜방법 3 - 제공 및 삽입을 통해 🎜🎜🎜🎜🎜(a) 개요🎜🎜🎜상위 페이지의
<router-view></에 <code>v-if 제어를 추가하여 router-view> >페이지를 삭제하고 다시 생성하여 새로 고침하고 provide 및 inject를 사용하여 다중 레벨 구성 요소 통신을 구현합니다. provide를 전달합니다. reload 메서드를 제공합니다. 하위 페이지는 inject를 통해 reload 메서드를 획득하고 해당 메서드를 호출합니다. 새로 고침 🎜🎜🎜🎜장점🎜: 빈 페이지가 없고 주소 표시줄에 빠른 전환 프로세스가 없으며 사용자 경험이 좋습니다🎜🎜 🎜🎜🎜단점🎜:
제공을 사용하여 삽입을 사용하여 다중 레벨 구성 요소 간 통신, v-if 및 <code>$nextTick 이벤트 루프🎜🎜 🎜🎜🎜(b) code🎜🎜rrreee🎜🎜(c) Preview🎜🎜🎜🎜 link🎜🎜🎜 적용(동영상 공유 학습: 🎜 vuejs 입문 튜토리얼🎜, 🎜기본 프로그래밍 영상🎜)🎜
위 내용은 vue에서 현재 페이지를 새로 고치는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![프론트엔드 Vue3 실전 전투 [손글씨 vue 프로젝트]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
