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

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

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

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 までご連絡ください。