vue はどのようにして現在のページを更新しますか?次の記事では、Vue で現在のページを更新する実装方法をいくつか紹介しますので、ご参考になれば幸いです。
#実装
(a) 概要Pass# 両方##location.reload
と$router.go(0) はページを更新できます。ブラウザの更新機能を使用します。これは、f5
キーを押して更新するのと同じです。利点: 十分シンプル
: 空白のページが存在し、ユーザーエクスペリエンスが悪い。 [関連する推奨事項: vuejs ビデオ チュートリアル 、
Web フロントエンド開発(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を使用しますページを切り替えるとページが破棄され、新しいページが作成されます
##利点: 空白のページがありません。 、優れたユーザーエクスペリエンス
<!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-Through Provide および Inject
By
を使用してマルチレベルコンポーネント通信。親ページは provide を通じて
reload メソッドを提供し、子ページは inject を通じて reload メソッドを取得します。メソッドを呼び出して更新します。 利点: 空白のページがなく、アドレス バーでの素早い切り替えプロセスがなく、ユーザー エクスペリエンスが優れています。 欠点 : 実装は少し複雑で、マルチレベル コンポーネント間の
の通信が必要です。 v-if コントロール コンポーネントの作成と破棄、および
$nextTick(b)コード <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!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(&#39;框架页加载&#39;)
},
// 通过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(&#39;首页加载&#39;)
},
//通过inject获取祖先元素的reload方法
inject: [&#39;reload&#39;],
methods: {
onClick(){
this.reload()
}
},
}
//路由配置
let router = new VueRouter({
routes: [
{path: &#39;/&#39;, component: Layout, children:[
{path: &#39;&#39;, component: Home}
]}
]
})
Vue.use(VueRouter)
//根组件
new Vue({
router,
el: &#39;#app&#39;
})
</script>
</html></pre><div class="contentsignin">ログイン後にコピー</div></div><code>(c)プレビュー
(学習ビデオ共有: vuejs 入門チュートリアル 、
基本的なプログラミングのビデオ)
以上がvue で現在のページを更新する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
