検索

ホームページ  >  記事  >  ウェブフロントエンド  >  vue で現在のページを更新する方法の簡単な分析

vue で現在のページを更新する方法の簡単な分析

青灯夜游
青灯夜游転載
2023-01-14 19:24:082544ブラウズ

vue はどのようにして現在のページを更新しますか?次の記事では、Vue で現在のページを更新する実装方法をいくつか紹介しますので、ご参考になれば幸いです。

vue で現在のページを更新する方法の簡単な分析

#プロジェクトで追加/変更/削除などの操作を行う場合、通常はデータを更新するか、現在のページを更新する必要があります。

考え方

  • (1) ページが単純な場合は、インターフェイスを呼び出してデータを更新するだけです。 (2) ページが複雑な場合は、複数のインターフェイスを呼び出す必要があります。または、複数のサブコンポーネントに更新を通知するには、現在のページを更新する必要があります。 現在のページを更新する 3 つの方法を次に示します。各方法にはさまざまな考え方があり、独自の長所と短所があります。

  • #実装

#方法 1 - location.reload および $router.go(0) メソッド経由

(a) 概要Pass# 両方##location.reload

と

$router.go(0) はページを更新できます。ブラウザの更新機能を使用します。これは、f5

キーを押して更新するのと同じです。

利点: 十分シンプル

リンク

方法 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(&#39;框架页加载&#39;)
    },
    template: `
        <div>
            <div>左侧菜单</div>    
            <div><router-view></router-view></div>
        </div>
    `
}
//首页
let Home = {
    template: `
        <div>
            首页
            <button @click="onClick">刷新</button>
        </div>
    `,
    created() {
        console.log(&#39;首页加载&#39;)
    },
    methods: {
        onClick(){
            //使用replace跳转后不会留下 history 记录,并通过redirect传递当前页面的路径
            this.$router.replace(`/blank?redirect=${this.$route.fullPath}`)
        }
    },
}
//空白页面
let Blank = {
    created(){
        console.log(&#39;空白页加载&#39;)
        //重新跳回之前的页面
        this.$router.replace(this.$route.query.redirect)
    },
    template: `
        <div></div>        
    `
}
//路由配置
let router = new VueRouter({
    routes: [
        {path: &#39;/&#39;, component: Layout, children:[
            {path: &#39;&#39;, component: Home}
        ]},
        //配置空白页面的路由
        {path: &#39;/blank&#39;, component: Layout, children:[
            {path: &#39;&#39;, component: Blank}
        ]}
    ]
}) 
Vue.use(VueRouter)
//根组件
new Vue({
    router,
    el: &#39;#app&#39;
})
</script>
</html>
    (c)プレビュー

リンク

メソッド3-Through Provide および Inject

##(a) 概要

By 975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e ## 親ページに ##v-if コントロールを追加して、ページを破棄して再作成してページを更新し、provide と

inject

を使用してマルチレベルコンポーネント通信。親ページは provide を通じて

reload

メソッドを提供し、子ページは inject を通じて reload メソッドを取得します。メソッドを呼び出して更新します。 利点: 空白のページがなく、アドレス バーでの素早い切り替えプロセスがなく、ユーザー エクスペリエンスが優れています。 欠点 : 実装は少し複雑で、マルチレベル コンポーネント間の

provide
    と
  • inject

    の通信が必要です。 v-if コントロール コンポーネントの作成と破棄、および

    $nextTick
    • イベント ループの適用

  • (b)コード <pre class="brush:html;toolbar:false;">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script src=&quot;https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js&quot; type=&quot;application/javascript&quot;&gt;&lt;/script&gt; &lt;script src=&quot;https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js&quot; type=&quot;application/javascript&quot;&gt;&lt;/script&gt; &lt;style&gt; * {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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;app&quot;&gt; &lt;router-view&gt;&lt;/router-view&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; //框架页 let Layout = { template: ` &lt;div&gt; &lt;div&gt;左侧菜单&lt;/div&gt; &lt;!-- 通过v-if实现销毁和重新创建组件 --&gt; &lt;div&gt;&lt;router-view v-if=&quot;isRouterAlive&quot;&gt;&lt;/router-view&gt;&lt;/div&gt; &lt;/div&gt; `, created() { console.log(&amp;#39;框架页加载&amp;#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: ` &lt;div&gt; 首页 &lt;button @click=&quot;onClick&quot;&gt;刷新&lt;/button&gt; &lt;/div&gt; `, created() { console.log(&amp;#39;首页加载&amp;#39;) }, //通过inject获取祖先元素的reload方法 inject: [&amp;#39;reload&amp;#39;], methods: { onClick(){ this.reload() } }, } //路由配置 let router = new VueRouter({ routes: [ {path: &amp;#39;/&amp;#39;, component: Layout, children:[ {path: &amp;#39;&amp;#39;, component: Home} ]} ] }) Vue.use(VueRouter) //根组件 new Vue({ router, el: &amp;#39;#app&amp;#39; }) &lt;/script&gt; &lt;/html&gt;</pre>(c)プレビュー

    リンク

(学習ビデオ共有: vuejs 入門チュートリアル 、

基本的なプログラミングのビデオ

)

以上がvue で現在のページを更新する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：Vue2.x と Vue3.x の Ref 演算 Dom の違いの簡単な分析次の記事：Vue2.x と Vue3.x の Ref 演算 Dom の違いの簡単な分析

関連記事

続きを見る