I can redirect to a different route, but that route doesn't work if I refresh the browser

问题

Through $router.push({ path:/week/${year}/${month}/${day}/}) I can successfully route/move (not sure about what term to use here) to a different route, with the URL correctly updating.

However once there, if I refresh the browser, the routed component becomes empty (and no console error).

Any idea what's going on here?

Here's my router code:

let router = new Router({
  mode: 'history',
  routes: [
    ...
    {
      path: '/',
      redirect: '/home',
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/week/:year/:month/:day',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    ...
  ]
})

回答1:

You need to configure whichever server that you are using to handle the router as you are using history mode.

I will post the sample configuration for Apache and Nginx since they are most commonly used.

---

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

---

Nginx

location / {
  try_files $uri $uri/ /index.html;
}

---

Additional information can be found on the official docs.

来源：https://stackoverflow.com/questions/53917029/i-can-redirect-to-a-different-route-but-that-route-doesnt-work-if-i-refresh-th