Mari kita bincangkan tentang cara menyediakan antara muka 404 dalam Vue2 dan Vue3

青灯夜游

Lepaskan： 2023-02-17 18:18:58

ke hadapan

2372 orang telah melayarinya

Artikel ini akan membawa anda melalui pembelajaran Vue dan bercakap tentang cara menyediakan antara muka 404 dalam Vue2 dan Vue3 saya harap ia akan membantu semua orang.

Mari kita bincangkan tentang cara menyediakan antara muka 404 dalam Vue2 dan Vue3

Dalam halaman vue, jika laluan yang tidak wujud dilompat, maka halaman tersebut akan muncul dalam keadaan skrin putih Untuk menyelesaikan masalah ini, kita boleh tulis antara muka 404 sendiri , biarkan ia melompat.

one.vue2

1.index.js

Dalam fail ini, secara amnya Apa disimpan ialah maklumat penghalaan kami. Kami sering menggunakan laluan:'*' untuk menangkap penghalaan kami Jika ia tidak wujud, kami akan membiarkannya melompat ke halaman 404 kami yang disesuaikan.

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
import Homepage from &#39;@/components/Homepage&#39;
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: &#39;/&#39;,
      component: Homepage,
    },
    {
      path:&#39;*&#39;,
      component:()=>import(&#39;../views/404.vue&#39;)
    }
  ]
})

Salin selepas log masuk

Nota: Laluan ini mesti ditulis di luar. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

halaman 2.404.vue

Kami biasanya boleh menyesuaikan halaman ini, yang biasanya termasuk hiperpautan untuk melompat ke halaman tertentu atau jumlah masa yang ditetapkan untuk melompat.

<template>
    <div>
        <p>
            页面将在<span>{{ time }}</span>秒后自动跳转首页，<br>
            您也可以点击这里跳转<a href="/">首页</a>
        </p>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
    name: &#39;&#39;,
    components: {

    },
    // 定义属性
    data() {
        return {
            time: &#39;10&#39;,
            time_end: null
        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        GoIndex() {
            let _t = 9
            this.time_end = setInterval(() => {
                if (_t !== 0) {
                    this.time = _t--;
                } else {
                    this.$router.replace(&#39;/&#39;)
                    clearTimeout(this.time_end)
                    this.time_end = null
                }
            }, 1000)
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.GoIndex()
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() {
        clearTimeout(this.time_end)
        this.time_end = null
    }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
.not_found {
    width: 100%;
    height: 100%;
    background: url(&#39;../../static/img/404.gif&#39;) no-repeat;
    background-position: center;
    background-size: cover;

    p {
        position: absolute;
        top: 50%;
        left: 20%;
        transform: translate(-50%, 0);
        color: #fff;
        span{
            color: orange;
            font-family: &#39;仿宋&#39;;
            font-size: 25px;
        }
        a {
            font-size: 30px;
            color: aqua;
            text-decoration: underline;
        }
    }
}
</style>

Salin selepas log masuk

Kemudian kesan yang dicapai adalah seperti yang ditunjukkan di bawah:

Mari kita bincangkan tentang cara menyediakan antara muka 404 dalam Vue2 dan Vue3

404 kesan

2.vue3

Mengapa kita bercakap tentang mereka secara berasingan? Kerana dalam vue3 kami membuat tetapan berikut:

 {
      path:&#39;*&#39;,
      component:()=>import(&#39;../views/404.vue&#39;)
    }

Salin selepas log masuk

akan menjana ralat, mesej ralat: Tangkap semua laluan ("*") kini mesti ditakrifkan menggunakan param dengan regexp tersuai, yang bermaksud : kini Semua laluan mesti ditakrifkan dengan parameter Regexp tersuai ("*").

Kemudian pegawai itu berkata begini:

// plan on directly navigating to the not-found route using its name
{ path: &#39;/:pathMatch(.*)*&#39;, name: &#39;not-found&#39;, component: NotFound },
// if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing
{ path: &#39;/:pathMatch(.*)&#39;, name: &#39;bad-not-found&#39;, component: NotFound },

Salin selepas log masuk

Kemudian kod dalam fail index.js kami dalam vue2 menjadi seperti berikut:

...

export default new Router({
  routes: [
    ...，
    {
      path:&#39;/:pathMatch(.*)*&#39;,
      component:()=>import(&#39;../views/404.vue&#39;)
    }
    //或者
     {
      path:&#39;/:pathMatch(.*)&#39;,
      component:()=>import(&#39;../views/404.vue&#39;)
    }
  ]
})

Salin selepas log masuk

( Mempelajari perkongsian video: Tutorial pengenalan Vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menyediakan antara muka 404 dalam Vue2 dan Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!