Vue系列教程（21）- 自定义404页面&路由模式

1. 引言

通过前面的章节，我们知道了不同页面间的参数传递 ，有兴趣的同学可以参阅下：

• 《Vue系列教程（01）- 前端发展史》
• 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
• 《Vue系列教程（03）- Vue开发利器VsCode》
• 《Vue系列教程（04）- VsCode断点调试》
• 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
• 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
• 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
• 《Vue系列教程（08）- 基本语法》
• 《Vue系列教程（09）- 事件绑定》
• 《Vue系列教程（10）- Model数据内容双向绑定》
• 《Vue系列教程（11）- 组件详解》
• 《Vue系列教程（12）- Axios异步通信》
• 《Vue系列教程（13）- 计算属性（computed）》
• 《Vue系列教程（14）- 插槽（slot）》
• 《Vue系列教程（15）- 事件内容分发（$emit）》
• 《Vue系列教程（16）- 模块打包器（webpack）》
• 《Vue系列教程（17）- 路由（vue-router）》
• 《Vue系列教程（18）- 集成UI框架（ElementUI）》
• 《Vue系列教程（19）- 嵌套路由（ElementUI）》
• 《Vue系列教程（20）- 参数传递（:to）》

本文讲解如何定义404页面。

2. 案例

① 在conpoments文件夹下创建404页面（NotFound.vue），具体的内容如下：

<template>
  <div>
    404，你的页面走了丢了！
  </div>
</template>
<script>
  export default {
    name: "NotFound"
  }
</script>
<style scoped>
</style>

② 配置路由，在index.js里添加代码块:

import NotFound from '../components/NotFound'
{
   path: '*',
   component: NotFound
}

③运行程序，输入一个错误的地址，可以看到如下界面：

3. 路由模式

在上面的案例，可以看到地址带有#号，其实是可以去掉的，这里引入路由模式。

① Vue的路由模式有两种:

• hash：路径带# 符号，如 :http://localhost/#/login
• history：路径不带 #符号，如 : http://localhost/login

② 修改路由模式的方法，如下：

export default new Router({
  mode: 'history',
  routes: [
  ]
});

本文完！