Let's talk about how to set up the 404 interface in Vue2 and Vue3

This article will take you through Vue learning and talk about how to set up the 404 interface in Vue2 and Vue3. I hope it will be helpful to everyone!

In the vue page, if a route that does not exist is jumped, then the page will appear in a white screen state. In order to solve this problem, we can write a 404 interface ourselves. , let it jump over.

一.vue2

1.index.js

In this file, generally What is stored is our routing information. We often use path:'*' to capture our routing. If it does not exist, we will let it jump to our customized 404 page.

import Vue from 'vue'
import Router from 'vue-router'
import Homepage from '@/components/Homepage'
Vue.use(Router)

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

Note: This path must be written on the outside. [Related recommendations: vuejs video tutorial, web front-end development]

2.404.vue page

We can usually customize this page, which generally includes a hyperlink to jump to a certain page or a timed amount of time to jump.

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

Then the effect achieved is as shown below:

404Achieved effect

二.vue3

Why should we talk about them separately? Because in vue3 we make the following settings:

 {
      path:'*',
      component:()=>import('../views/404.vue')
    }

will generate an error, the error message: Catch all routes ("*") must now be defined using a param with a custom regexp., which means: must now be used All routes are defined with custom Regexp parameters ("*").

Then the official said this:

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

Then the code in our index.js file in vue2 becomes as follows:

...

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

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of Let's talk about how to set up the 404 interface in Vue2 and Vue3. For more information, please follow other related articles on the PHP Chinese website!