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页面的效果。

目录
相关文章
|
10月前
|
Shell Android开发 开发者
Android系统 自定义动态修改init.custom.rc
Android系统 自定义动态修改init.custom.rc
523 0
|
10月前
|
XML Java 数据格式
面试题:怎样把所有的组件的lazy-init值都设置为默认true?
面试题:怎样把所有的组件的lazy-init值都设置为默认true?
75 0
|
JavaScript
JS设置select下拉框默认选中
JS设置select下拉框默认选中
156 0
ts页面跳转后不显示刷新才显示
ts页面跳转后不显示刷新才显示
92 0
ts页面跳转后不显示刷新才显示
|
Arthas 安全 测试技术
Options 全局选项的查看和设置 | 学习笔记
快速学习 Options 全局选项的查看和设置
Options 全局选项的查看和设置 | 学习笔记
|
JavaScript
【mpvue】radio-group 标签组设置默认选择checked: 'true',选择了单选按钮的非默认选项,再点击其他的选择,单选按钮又会变成默认的选项
1、问题举例描述: radio-group 标签组设置默认选择checked: ‘true’,选择了单选按钮的非默认选项(场外),再点击其他的选择(手续费率),单选按钮又会变成默认的选项(场内) 默认状态如下:
574 0
【mpvue】radio-group 标签组设置默认选择checked: 'true',选择了单选按钮的非默认选项,再点击其他的选择,单选按钮又会变成默认的选项
MPAndroidChart 教程:设置数据 Setting Data
本章主题是介绍为各种图表设置数据 线型图 如果要将值(数据)添加到图表中,则必须通过 public void setData(ChartData data) { ... } 基类ChartData(ChartData)类封装了呈现期间图表所需的所有数据和信息。
1995 0