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

Question

I am working on a Vue application and want to set up a exact path match for the default route. I have experience in React and Angular and both gave option exact and pathMatch:'full' so the default route only comes into action if it matches exactly.

In vue, when I refresh my app, the default route gets fired and takes the user back to the first page . Is there a way to do something like that in 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

Try putting your routes in this order because Vue-router routes order matters. The matching starts from the top:

  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?
    }
  ]

Answer 2

I know this is an old question, but maybe somebody else can benefit from it.

It seems like Vue Router uses exact match by default. For example I have something like this, and it opens the given component without the use of an "exact" keyword or anything similar.

  {
    name: 'Mailbox',
    path: '/mailbox',
    component: Mailbox
  },
  {
    name: 'Message',
    path: '/mailbox/:messageId',
    component: Message
  }

Also, in the documentation it is shown how to use the asterisk to match all routes that start with a given path. We can then assume this is not the default behaviour of Vue Router.