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. poj 3517(约瑟夫环问题)

    And Then There Was One Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4873   Accepted: ...

  2. 使用 dynamic 标记解析JSON字符串(转)

    http://www.cnblogs.com/taotaodetuer/p/4171327.html string jsonStr = "{\"data\": {\&qu ...

  3. Ocelot(一)- .Net Core开源网关

    Ocelot - .Net Core开源网关 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/10857688.html 源码地 ...

  4. LuoguP1606 [USACO07FEB]荷叶塘Lilypad Pond 【最短路】By cellur925

    最短路好题!] 参考资料:学长 https://blog.csdn.net/TSOI_Vergil/article/details/52975779 学长太强了!!!%%% 题目传送门 ======= ...

  5. c语言类型修饰符及内存

    今天来学习一下c语言类型修饰符及内存分布 1.auto int a; 默认在内存 2.register int a; 限制变量定义在寄存器上的修饰符 编译器会尽量安排CPU的寄存器去存放这个a,如果寄 ...

  6. [SHOI2002]取石子游戏之三

    Wythoff's Game,详解请见浅谈算法--博弈论中的例6 /*program from Wolfycz*/ #include<cmath> #include<cstdio&g ...

  7. ACM_逆序数(归并排序)

    帮挂科 Time Limit: 2000/1000ms (Java/Others) 64bit IO Format: %lld & %llu Problem Description: 冬瓜发现 ...

  8. E. The Values You Can Make 背包,同时DP

    http://codeforces.com/problemset/problem/688/E 题目需要在n个数中找出一个集合,使得这个集合的和为val,然后问这些所有集合,能产生多少个不同的和值. 题 ...

  9. SharePoint2013升级SP1后,运行配置向导报错:未注册sharepoint服务

    SharePoint Server 2013 升级SP1后,需要重新运行配置向导,但是运行过程中报错:未注册sharepoint服务. 日志详细错误信息: 已引发类型为 Microsoft.Share ...

  10. linux小白成长之路11————​linux命令大全

    1. 启动,关机,登入,登出相关命令 登录:login 登出:logout 登出:exit 停止系统:shutdown 停止系统:halt 重启动:reboot 切断电源:poweroff 把内存里的 ...