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. 关于Lucene全文检索相关技术

    Lucene技术专门解决海量数据下的模糊搜索问题. Lucene主要完成的是数据预处理.建立倒排索引,及搜索.排名.高亮显示等功能 全文检索相关词语概要: 单词和文档矩阵: 文档(Document): ...

  2. bzoj 1096: [ZJOI2007]仓库建设【斜率优化】

    好眼熟啊 直接dp显然很难算,所以设val为只在n点建一个仓库的费用,然后设f[i]为在i~n点建若干仓库并且i点一定建一个仓库的最大省钱数 转移很显然,设s为p的前缀和,f[i]=max{f[j]+ ...

  3. Codeforces 938D Buy a Ticket 【spfa优化】

    用到了网络流的思想(大概).新建一个源点s,所有边权扩大两倍,然后所有的点向s连边权为点权的无向边,然后以s为起点跑spfa(S什么L优化的),这样每个点到s的距离就是答案. 原因的话,考虑答案应该是 ...

  4. web项目tomcat启动url自定义(去掉项目名)

    通常,使用maven构建web项目,启动时默认的访问路径: http://ip:port/项目名 很多时候我们不喜欢这样 访问,我们希望下面的访问方式: http://ip:port 如果是本地的to ...

  5. 进击的Python【第十一章】:消息队列介绍、RabbitMQ&Redis的重点介绍与简单应用

    消息队列介绍.RabbitMQ.Redis 一.什么是消息队列 这个概念我们百度Google能查到一大堆文章,所以我就通俗的讲下消息队列的基本思路. 还记得原来写过Queue的文章,不管是线程queu ...

  6. Quartz~关于cron表达式要说的

    每20秒执行一次

  7. 块级元素的text-align对行内元素和果冻元素(inline-block)的作用

    块级元素社设置了text-align:center以后,对其直接行内元素/果冻元素.继承行内元素/果冻元素都会产生“居中效应”. <style> .test4{ text-align: c ...

  8. mac系统 usr/ 目录下无法新建文件夹???

    这个问题是在操作mongodb的时候遇到的,很苦恼.目前已经解决,将解决方法分享给各位遇到同样问题的你们. 1.重启电脑,开始关机就立马按住command+R,进入macOS恢复功能界面,进入的时间可 ...

  9. Unity笔记(4)自学第四、五天

    主要是移动脚本和2个技能的脚本编写. 首先是移动的脚本: using System.Collections; using System.Collections.Generic; using Unity ...

  10. 锐动SDK应用于行车记录仪

    方案架构 手机端直播与录播功能忠实记录旅途中各种突发事件,还原事实真相,与家人和朋友分享沿途美景,一同感受美妙之旅. 强大的视频编辑功能,像编辑图片一样给视频添加各种滤镜,配音,配乐,标题文字等特效. ...