vue-router:mode与404

喜闻乐见404

mode模式

mode取值说明:

1
2
3
4
export default new Router({
mode: 'history', //mode模式
routes: [...]
})

404页面设置

如果访问路由不存在,或用户输入错误,给一个404提示页面。

  • 在src/router/index.js中加入代码:
1
2
3
4
5
// 404
{
path: '*',
component: () => import('@/components/404')
}
  • 编写src/components/404.vue页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<div class="hello">
<h1>404 not found</h1>
</div>
</template>
<script>
export default {
data () {
return {

}
}
}
</script>

<style scoped>
</style>

参考教程