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

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

2.新建404页面:

  1. <template>
  2. <div>
  3. <h2>{{ msg }}</h2>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data () {
  9. return {
  10. msg: 'Error:404'
  11. }
  12. }
  13. }
  14. </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. UI:UITextView

    #import "MainViewController.h" @interface MainViewController () <UITextViewDelegate> ...

  2. Java多线程系列七——ExecutorService

    java.util.concurrent.ExecutorService接口提供了许多线程管理的方法 Method 说明 shutdown 拒绝接收新的任务,待已提交的任务执行后关闭,且宿主线程不阻塞 ...

  3. Javaweb的9大内置对象

    request(请求) response(响应) session(一个用户存放数据,安全) application(一个项目一般有一个,多用户共享存简单数据) out(输出,在页面输出内容) conf ...

  4. linux下解压tgz文件(转载)

    转自:http://www.blogjava.net/chenlb/archive/2008/09/03/226654.html .tgz 解压:    tar zxvf myfile.tgz

  5. VirtualBox搭建1主2从虚拟机

    环境要求 最近在使用VirtualBox搭建一个实验环境,由于公司规定了所有的机器都不能使用固定IP,都必须由DHCP自动获取. 为了不影响公司整理的网络环境,只能把实验用的网络环境限制在使用内部IP ...

  6. post和get提交服务器编码过程

    参考资料:http://blog.csdn.net/z55887/article/details/46975679 先说出一个知识点: 如果浏览器端编码是UTF-8,那在服务器端解决乱码问题的方法有两 ...

  7. 用C#操作word替换字符,用spire

    这两天想写个小程序,是用C#操作word文档的.许多人都对微软本身的解决方案COM组件十分不看好,比如需要本机安装office等等,总之吐槽很多,直接放弃. 搜到一个国产的npoi库,据说操作简单功能 ...

  8. 死磕 java集合之LinkedList源码分析

    问题 (1)LinkedList只是一个List吗? (2)LinkedList还有其它什么特性吗? (3)LinkedList为啥经常拿出来跟ArrayList比较? (4)我为什么把LinkedL ...

  9. 2017广东工业大学程序设计竞赛决赛 H tmk买礼物

    题意: Description 今天是校赛的日子,为了庆祝这么喜庆的日子,TMK打算买些礼物给女票LSH庆祝一下. TMK进入了雪梨超市,然后刚踏入的一瞬间,店主就对TMK说:“恭喜你成为了本店第21 ...

  10. VUE 全选

    <div id="vue_det"> <p>全选:</p> <input type="checkbox" id=&qu ...