mode的设置和404页面的处理

简介: mode的设置和404页面的处理

在学习过渡效果的时候,我们学了mode的设置,但是在路由的属性中还有一个mode。这节课我们就学习一下另一个mode模式和404页面的设置。


mode的两个值


histroy:当你使用 history 模式时,URL 就像正常的 url,例如 http://jsapng.com/lms/,也好看!


hash:默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。


404页面的设置:

用户会经常输错页面,当用户输错页面时,我们希望给他一个友好的提示,为此美工都会设计一个漂亮的页面,这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.


1.设置路由配置文件(/src/router/index.js)

{
   path:'*',
   component:Error
}


这里的path:'*'就是找不到页面时的配置,component是我们新建的一个Error.vue的文件。


2.新建404页面:

/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>


3.我们再用<router-link>瞎写一个标签的路径。

<router-link to="/bbbbbb">我是瞎写的</router-link> |


预览一下我们现在的结果,就已经实现404页面的效果。

目录
相关文章
|
前端开发 JavaScript
设置控件不能点击(pointer-events)
设置控件不能点击(pointer-events)
57 0
|
13天前
|
运维 监控 网络安全
ClientAliveCountMax设置0可以吗
在决定"clientalivecountmax"或类似并发控制机制时,务必进行充分的测试与评估,确保既能满足业务连续性要求,又能有效管理资源。访问[专业云服务提供商,了解更多关于优化服务器配置、提升网络应用性能的专业知识与解决方案,帮助您在复杂的网络环境中做出更明智的选择。
34 0
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
vxe-table可编辑状态默认显示下拉选select为默认展示
vxe-table可编辑状态默认显示下拉选select为默认展示
设置
字体分为,编辑器字体与代码的字体,这里我编辑器的字体使用的是编辑器本身的,代码的字体也是,只不过相对于代码的注释的字体和代码文件默认打开的显示大小我是有微调的,代码的注释字体为 KaiTi,代码默认打开的大小为 16,那么为啥是 16 呢而不是其它的数值呢,原因就是如果默认 16 的话,打开的代码片段刚好是在编辑器的纵坐标的分界线内,这个分界线自行去发现这里不介绍为界限是什么东西,如果有以为则在下方评论区留言即可我来解答(然后再往后的日子我发现设置 16 也不是非常的合理,自己根据自己的个人喜好来决定吧,反正我是设置的比较大字体)。
55 0
|
Arthas 安全 测试技术
Options 全局选项的查看和设置 | 学习笔记
快速学习 Options 全局选项的查看和设置
Options 全局选项的查看和设置 | 学习笔记
|
应用服务中间件 Apache nginx