VueRouter-404错误配置

404错误分为两种：

1> 页面中不存在该路由；

2> 页面中传递的参数在服务器端不存在，比如，个人中心是需要从后端获取数据的，但是你查询的用户是不存在的，此时也是404错误。

配置

在路由规则中，`*`代表的是任意字符。所以只要在路由的最后加一个`*`路由，那么以后没有匹配到的`url`都会被导入到这个视图中。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>VueRouter-404错误配置</title>
</head>

<body>
    <div id="app">
        <ul>
            <li>
                <router-link to="/">首页</router-link>
            </li>
            <li>
                <router-link to="/our/Xsan">我们</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
    <script>
        var index = Vue.extend({
            template: "<h1>首页</h1>"
        })
        var our = Vue.extend({
            template: "<h1>欢迎，{{$route.params.user}}</h1>"
        })
        var errPage = Vue.extend({
            template: "<h1>404错误</h1>"
        })
        let router = new VueRouter({
            routes: [{
                path: "/",
                component: index
            }, {
                path: "/our/:user",
                component: our
            }, {
                path: "*",
                component: errPage
            }]
        })
        new Vue({
            el: "#app",
            router: router
        })
    </script>
</body>

</html>

相关阅读:
squid反向代理
LVM逻辑卷管理
磁盘分区
磁盘阵列
apache基本配置
LNMP简要配置
高性能Web服务器Nginx
samba文件共享服务配置(multiuser机制)二（共两节）
samba文件共享服务配置一（共2节）
linux 批量修改文件名文件名只保留部分，去掉部分

原文地址：https://www.cnblogs.com/xshan/p/12361720.html