Vue项目访问不存在的链接显示空白，怎么让他报错

如果，当我运行我的vue项目的时候，我随便输了个网址路由，他居然！！！！直接给我扔了个空白页。不知道的还以为是网页还没加载出来呢？怎么搞？简单，我们给他报404不就行了吗。

首先，我们在我们的views目录下，新建一个NotFound.vue文件。

<template>
	<img src="../assets/logo.png" />
	<h1>404</h1>
	<h2>抱歉，当前页面不存在</h2>
</template>

<script>
	export default{
		name:'NotFound'
	}
</script>
	
<style>
	div{
		margin-top: 100px;
		text-align: center;
	}
</style>

然后我们在路由的index文件中的添加他的路由：

export default new Router({
	mode: 'history',
	routes:[
		{
			path:'*',
			component:NotFound
		}
	]
})

完整代码：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'
import NotFound from '../views/NotFound.vue'

Vue.use(Router);

export default new Router({
	mode: 'history',
	routes:[
		//登錄頁
		{
			path:'/login',
			name:'Login',
			component:Login
		},
		//主页
		{
			path:'/main',
			name:"Main",
			component:Main,
		},	
		//查无此页
		{
			path:'*',
			component:NotFound
		}
	]
})

之后我们登录那些不存在的页面显示如下：