vue.js - 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?
    }
  ]