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

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

2.新建404页面:

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

已经实现404页面的效果。

mode的两个值

  1. histroy:当你使用 history 模式时,URL 就像正常的 url,例如 http://www.baidu.com/lms/,也好看!
  2. hash:默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。

vue hash模式和404页面的配置的更多相关文章

  1. vue+webpack 打包文件 404 页面空白

    最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...

  2. vue hash模式下微信分享后打开首页,三种完美解决方案

    微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播.所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能.但是,前几天在对接微信分享 API ...

  3. 学习笔记-vue hash模式打包

    1.打包设置config->index.js 2.图片资源路径出现问题 设置下utils.js文件

  4. 通过修改 Apache 的配置文件 htaccess 文件实现自定义404页面

    最近在学习使用Apache服务器的配置,做一个记录. Apache下有个.htaccess文件,是Apache的一个特殊的配置文件.这个配置文件默认是没有的,要手动在各自的项目的根目录编写才行. 要实 ...

  5. 066——VUE中vue-router之rewrite模式下配置404页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue开发多页面应用 - hash模式和history模式

    我们知道vue可以快速开发web单页应用,而且官方为我们提供了自己的应用脚手架vue-cli,我们只需要下载脚手架,安装依赖后就可以启动vue应用雏形. 这得益与webpack的依赖追踪,各种资源后缀 ...

  7. Vue 编程式导航(通过js跳转页面)以及路由hash模式和history模式

    第一种方法: this.$router.push({path:'shopcontent?aid=3'}   第二种方法   this.$router.push({name:'news'}} 通过在ma ...

  8. Vue路由的hash模式与history模式的区别?

    1.首先router有两种模式:hash模式(默认).history模式(需配置mode: 'history') hash和history的区别?   hash                    ...

  9. Vue中hash模式和history模式的区别

    vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...

随机推荐

  1. 《The Unreasonable Effectiveness of Recurrent Neural Networks》阅读笔记

    李飞飞徒弟Karpathy的著名博文The Unreasonable Effectiveness of Recurrent Neural Networks阐述了RNN(LSTM)的各种magic之处, ...

  2. linuxmint17.3提示flash不是最新版本解决方法(copy)

    [资料来自于:http://blog.csdn.net/kh896424665/article/details/54879608] 问题:播放视频提示:Adobe Flash Player 不是最新版 ...

  3. UVa 11806 Cheerleaders (数论容斥原理)

    题意:给定一个n*m的棋盘,要放k个石子,要求第一行,最后一行,第一列,最后一列都有石子,问有多少种放法. 析:容斥原理,集合A是第一行没有石子,集合B是最后一行没有石子,集合C是第一列没有石子,集合 ...

  4. Eclipse如何打开Android工程(转载)

    转自:http://www.cnblogs.com/kernel-style/p/3339102.html 一.Eclipse如何打开Android工程 1.你可以在file->new-> ...

  5. java中static,super,final关键字辨析

    1:static关键字 利:1)对对象的共享数据提供单独的空间存储. 2)修饰的方法可以直接被类名调用 弊:1)生命周期长. 2)访问出现限制(只能访问静态) 它可以有静态方法,静态类,静态变量 2: ...

  6. bzoj 2423: [HAOI2010]最长公共子序列【dp+计数】

    设f[i][j]为a序列前i个字符和b序列前j个字符的最长公共子序列,转移很好说就是f[i][j]=max(f[i-1][j],f[i][j-1],f[i-1][j-1]+(a[i]==b[j])) ...

  7. bzoj 3308: 九月的咖啡店【最大费用最大流】

    费用流里spfa最后的判断要写成dis[t]>=0而不是dis[t]!=-inf否则会WAWAWA-- #include<iostream> #include<cstdio&g ...

  8. ACboy needs your help HDU - 1712

    ACboy needs your help HDU - 1712 ans[i][j]表示前i门课共花j时间最大收益.对于第i门课,可以花k(0<=k<=j)时间,那么之前i-1门课共花j- ...

  9. Dock

    搭建本地 Registry - 每天5分钟玩转 Docker 容器技术(20) 小结: dock 版本号 分为 3位,比如1.1.2 就分为1, 1.1,1.1,2 这个几个版本 这种 tag 方案使 ...

  10. .vimrc文件配置及含意

    1.  vimrc文件常见语句释义 设定 tab 的位置          :set tabstop=4 输入 tab 时自动将其转化为空格          :set expandtab       ...