我们继续来学习关于路由匹配更多的用法
404页面
我们要配置一个路由，如果用户进入一个我们在route中没有定义过的页面，就让他进入404页面，
首先写一个vue文件，表示404页面，在views下新建一个文件404.vue：
<template>
<div>404</div>
</template>
<script>
export default {
}
</script>
<style></style>
这个页面除了显示了一个404什么也没有，很简单。
然后在router.js文件的routes里定义我们的404路由，一般来说，我们把404路由定义在最后：
{
path: '/:pathMatch(.*)*',
name: 'notFound',
component: () => import('./views/404'),
},
这样，如果用户进入没定义过的路由，我们都会给他显示404页面。
比如，进入http://localhost/:8081/linge，
/linge这个路由我们在routes中没有定义过，所以页面会显示404.
在path属性中定义的这个pathMatch，我们可以通过它获取路由的值，
我们在404.vue中增加打印
<template>
<div>404</div>
</template>
<script>
export default {
mounted() {
console.log(this.$route.params.pathMatch) // 新增
},
}
</script>
<style></style>
我们可以看到控制台输出了：
['linge']
它是一个数组，linge就是我们当前的路由
我们把进入http://localhost:8081/linge/haha，
控制台就会输出
['linge', 'haha']
这样我们不但可以把未定义的路由让他进入404页面，也可以获取这个路由的具体路径是什么
以特定字符串开头的路由匹配
比如说我们有一个会员页面，如果路由是以member开头，都进入这个页面，这个写法其实和上面的非常类似，我们先写一个member.vue，当做页面内容：
<template>
<div>会员专页</div>
</template>
<script>
export default {}
</script>
<style></style>
然后在router.js中的route添加一个路由：
{
path: '/member:id(.*)',
component: () => import('./views/member'),
name: 'member',
},
这样我们在浏览器中输入http://localhost:8081/member，
就可以进入会员页面
http://localhost:8081/member01也可以进入会员页面，
我们在member.vue中还可以获取到member后面跟的数字，因为我们在route中定义了它叫id
<template>
<div>会员专页</div>
</template>
<script>
export default {
mounted() {
console.log(this.$route.params.id) // 新增
},
}
</script>
<style></style>
这是控制台打印了
01
这样我们就是实现了匹配所有以member开头的路由了。
官网上介绍了更高级路由匹配模式，不过我觉着没什么用，这里就不再介绍了，有兴趣的小伙伴可以自己去看看。
