Analisis ringkas tentang cara memuat semula halaman semasa dalam vue-View.js-php.cn

Analisis ringkas tentang cara memuat semula halaman semasa dalam vue

青灯夜游

Lepaskan： 2023-01-14 19:24:08

ke hadapan

2587 orang telah melayarinya

Bagaimana untuk memuat semula halaman semasa dalam vue? Artikel berikut akan memperkenalkan kepada anda beberapa kaedah pelaksanaan Vue menyegarkan halaman semasa saya harap ia akan membantu anda!

Analisis ringkas tentang cara memuat semula halaman semasa dalam vue

Jika anda melakukan operasi seperti menambah/mengubah suai/memadam dll. dalam projek, anda biasanya perlu memuat semula data atau memuat semula halaman semasa.

Idea

(1) Jika halaman itu mudah, panggil sahaja antara muka untuk memuat semula data
(2) Jika halaman itu rumit, anda perlu memanggil Berbilang antara muka atau berbilang sub-komponen dimaklumkan untuk memuat semula Anda boleh memuat semula halaman semasa. Berikut adalah 3 cara untuk menyegarkan halaman semasa Setiap kaedah mempunyai idea yang berbeza dan mempunyai kelebihan dan kelemahan tersendiri

pelaksanaan

Kaedah 1 - Melalui kaedah location.reload dan $router.go(0)

(a) Gambaran Keseluruhan

Lulus: Cukup mudahlocation.reload$router.go(0)f5

: Halaman akan kosong dan pengalaman pengguna tidak bagus. [Cadangan berkaitan:
tutorial video vuejs, pembangunan bahagian hadapan web
]
(b) kod
(c) Pratonton

Pautan

<!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>

Salin selepas log masuk

Kaedah 2 - Melalui Halaman Kosong

(a) Gambaran Keseluruhan

melompat ke halaman kosong melalui kaedah , dan kemudian memanggil kembali ke halaman sebelumnya menggunakan untuk menukar halaman. Ciri yang akan memusnahkan halaman dan mencipta halaman baharu

Kelebihan

: Tidak akan ada halaman kosong, pengalaman pengguna yang baik

$router.replacevue-router

: Akan ada proses penukaran pantas dalam bar alamat
(c) Pratonton

Pautan

<!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>

Salin selepas log masuk

Kaedah 3 - Dengan menyediakan dan inject

(a) Gambaran Keseluruhan

Segarkan halaman dengan memusnahkan dan mencipta semula halaman dengan menambahkan pada halaman induk, dan menggunakan dan

Untuk melaksanakan komunikasi komponen berbilang peringkat, halaman induk menyediakan kaedah

melalui , sub-halaman memperoleh kaedah melalui

, dan memanggil kaedah untuk menyegarkan

<router-view></router-view>v-if的控制provideinjectKelebihanprovide: Tidak akan ada halaman kosong, tidak akan ada proses penukaran pantas dalam bar alamat, dan pengalaman pengguna adalah baik reloadinjectreload

: Pelaksanaannya agak rumit sedikit , melibatkan komunikasi antara
dan komponen berbilang peringkat, dan mengawal penciptaan dan pemusnahan komponen , dan
aplikasi gelung acara
(b) Kodprovideinjectv-if$nextTick
(c) Pratonton

Pautan

<!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>

Salin selepas log masuk

(Belajar perkongsian video:

Tutorial pengenalan Vuejs, Video pengaturcaraan asas

)

Atas ialah kandungan terperinci Analisis ringkas tentang cara memuat semula halaman semasa dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!