zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    noip欢乐赛10.24 分火腿
    noip2014 无线网络发射器选址/wireless.
    noip2012 借教室 线段树最小值做法
    Codevs1021题解---SPFA+路径记录
    Vijos1448题解---线段树+括号法
    Vijos1425题解---栈
    Codevs1022题解---匈牙利算法
    人们总要为曾经的年轻买单
    2017-10-26
    2017-10-24LCA
  • 原文地址:https://www.cnblogs.com/xshan/p/12361720.html
Copyright © 2011-2022 走看看