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. asp.net 中的事务

    ASP.NET开发过程中的事务处理 http://www.cnblogs.com/georgeHeaven/p/3766609.html

  2. Gym 100512G Grand Tour (拓扑排序)

    题意:一个团队要去参观一些学校,某些学校要在某些学校之前先参观,并且每个学校有一个权值,团队去的时间与权值的差作为难过度(最小是0), 所有的难过度的最大值是伤心度,让你安排参观顺序,使得这个伤心度最 ...

  3. 转:Oculus Unity Development Guide开发指南(2015-7-21更新)

    http://forum.exceedu.com/forum/forum.php?mod=viewthread&tid=34175 Oculus Unity Development Guide ...

  4. [Swift通天遁地]一、超级工具-(2)制作美观大方的环形进度条

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. Poj 3436 ACM Computer Factory (最大流)

    题目链接: Poj 3436 ACM Computer Factory 题目描述: n个工厂,每个工厂能把电脑s态转化为d态,每个电脑有p个部件,问整个工厂系统在每个小时内最多能加工多少台电脑? 解题 ...

  6. [ZPG TEST 110] 多边形个数【DP】

    1. 多边形个数 (polygons.pas/c/cpp) [问题描述] 给定N线段,编号1到n.并给出这些线段的长度,用这些线段组成一个K边形,并且每个线段做多使用一次.若使用了一条不同编号的线段, ...

  7. office doc/xls/ppt 和 docx/xlsx/pptx 区别

    经同事告诉,今天才真正明白两都区别: doc/xls/ppt  是office2007以前的扩展名: docx/xlsx/pptx 是office2007版本及以后的扩展名,是基于xml的文件格式,x ...

  8. Docker安装jenkins(六)

    这里是在linux环境下安装docker之后,在doucer内安装jenkins --------------------docker 安装 jenkins---------------------- ...

  9. 移动设备访问使用百度js跳转

    以下为代码,可放置在网站foot底部文件,或者haead顶部文件,建议将代码放在网站顶部,这样可以实现手机访问立即跳转! <script src="http://siteapp.bai ...

  10. scala如何在任意方法中打印当前线程栈信息(StackTrace)

    1.以wordcount为例 package org.apache.spark.examples import org.apache.spark.{SparkConf, SparkContext} / ...