vue router 默认路由，匹配所有路由到 404 页面

vue2 + vue-router

const needLoginRoutes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/home',
    redirect: '/'
  }
]

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404.vue')
  },
  {
    path: '/manage-*', // 匹配所有以manage开头的路由
    name: 'Manage',
    component: () => import('../views/manage.vue')
  },
  {
    path: '*', // 匹配所有路由
    redirect: '/404'
  }
]

需要注意，匹配所有要放到最后，因为路由是从上往下匹配，匹配到一个后就会停止，如果把加 * 号的路由写到上边，可能会引发死循环

所以，如果你只有一个页面，希望用户所有的路径都匹配到某页面就可以这样写

const routes = [
    {
        path: '/xxx',
        name: 'Xxx',
        component: () => import('../Xxx')
    },
    {
        path: '*',
        redirect: '/xxx'    
    }
]

==========

需要注意的是 vue3 + vue-router

vue-router 把 * 这种写法废弃了，如果需要匹配所有，需要写成这样

const routes = [
  // pathMatch是参数的名称，例如，要去/not/found
  // { params: { pathMatch: ['not', 'found'] }}

  // 最后一个*，它意味着重复的参数，如果您打算使用它的名称直接导航到未找到的路由，那么这是必要的
  { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },

  // 如果你省略了最后一个' * '，参数中的' / '字符将在解析或推入时被编码
  { path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound },
]

参考链接：https://next.router.vuejs.org/guide/migration/index.html#moved-the-base-option