我们继续来学习关于路由匹配更多的用法

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开头的路由了。

官网上介绍了更高级路由匹配模式，不过我觉着没什么用，这里就不再介绍了，有兴趣的小伙伴可以自己去看看。