通配符(*)路由

如果想匹配任意路径，我们可以使用通配符 (*)。通常用于客户端 404 错误

//router.js
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { 
        path: '*', // 会匹配所有路径
        component: './index.vue'
    }
  ]
})



//index.vue
<template>
  <div class="about">
    <h1>{{this.$route.params}}</h1>
  </div>
</template>

当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 属性。它包含了 URL 通过通配符被匹配的部分

假设路径为http://localhost:8080/#/sss，页面显示如下

image.png