vue-router 指定向 动态路由 正则 匹配404

设置指定向 动态路由 正则 匹配404

const routes = [

  //指定向
  {
    path: "/",
    name: "Home",
    //component: Home,
    redirect: '/index',
    children: [
      {
        path: 'index',
        name: 'index',
        component: () =>
          import("../views/index.vue"),
      },

    ]
  },
  //动态路由
  {
    path: "/schedule/:id",
    name: "schedule",
    component: () => import("../views/schedule/index.vue"),
  },
  //正则 (如：id只能是数字)
  {
    path: "/style/:id(\\d+)",
    name: "style",
    component: () => import("../views/style/index.vue"),
  },
  //正则  :id*可以传参数或者不传 :id+至少一个参数
  {
    path: "/film/:id*",
    name: "film",
    component: () => import("../views/film/index.vue"),
  },
  //404
  {
    path: "/:path(.*)",
    component: 'import("../views/404.vue")',
  },
]
//解决重复点击报错问题
const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
export default router;