Vue 路由器中的精确路径匹配？

Question

我正在开发一个 Vue 应用程序，想要为默认路由设置精确的路径匹配。我有 React 和 Angular 的经验，并且都提供了选项exact，pathMatch:'full'因此默认路由只有在完全匹配时才会生效。

在 vue 中，当我刷新应用程序时，默认路由将被触发并将用户带回首页。有没有办法在 Vue 中做类似的事情？

  routes: [
    {
      path: "/",
      name: "home",
      component: Home
      // how can I add exact match config here?
    },
    {
      path: "/login",
      name: "login",
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/Login.vue")
    },
    {
      path: "/charts",
      name: "charts",
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/ChartDemo.vue")
    }
  ]

Answer 1

尝试按此顺序放置您的路由，因为 Vue-router 路由顺序很重要。匹配从顶部开始：

  routes: [
    {
      path: "/login",
      name: "login",
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/Login.vue")
    },
    {
      path: "/charts",
      name: "charts",
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/ChartDemo.vue")
    },
    {
      path: "/",
      name: "home",
      component: Home
      // how can I add exact match config here?
    }
  ]