Vue-router 第9节 mode的设置和404页面的处理

Vue-router 第9节 mode的设置和404页面的处理

---

目录

• Vue-router 第9节 mode的设置和404页面的处理
  • 第9节 mode的设置和404页面的处理

第9节 mode的设置和404页面的处理

在学习过渡效果的时候，我们学了mode的设置，但是在路由的属性中还有一个mode。这节课我们就学习另一个mode模式和404页面的设置。
在路由的配置文件index.js中，routes:{}中放入mode，
eg：

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

配置值：

mode的两个值：

• 1.history：当你使用history模式时，URL 就像正常的 url，例如 http://daisy.com/lms/，没有之前的#号；
• 2.hash：默认’hash’值，就像我们之前的#号。但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。

404页面的设置：
用户会经常输错页面，当用户输错页面时，我们希望给他一个友好的提示，为此美工都会设计一个漂亮的页面，这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制。

1. 设置（添加）我们的路由配置文件（src/router/index.js）：

{
   path:'*',
   component:Error
}

这里的path:'*'就是找不到页面时的配置，component就是我们新建的一个Error.vue文件。

2. 在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容：

<template>
    <h2>{{msg}}</h2>
</template>

<script>
export default {
    data(){
        return{
            msg:'Error:404'
        }
    }
}
</script>

然后引入一下：

import Error from '@/components/Error'

3. 我们再用<router-link>随便写一个标签的路径：

<router-link to="/bbbbbb">我是瞎写的</router-link> 

预览一下我们现在的结果，就已经实现404页面的效果：