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

文章目录

• • 
    
• ​​1. 引言​​
• ​​2. 案例​​
• ​​3. 路由模式​​
  • 
    

1. 引言

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

​

本文讲解如何定义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: [
  ]
});

本文完！