vue-router (7) 重新導向與404頁面

發表於 更新於 分類於
使用 redirect 重新導向

Redirect

當想從 ‘/home’ ，導向到 ‘/‘ 時:

1
const routes = [{ path: '/home', redirect: '/' }]

也可以使用命名路由

1
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

或使用 function 來進行動態的導向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // the function receives the target route as the argument
      // we return a redirect path/location here.
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

Alias 路由別名

路由別名讓兩個不同路由，可以對應同一個元件。

‘/‘ 和 ‘/home’，都會顯示同個元件。

1
const routes = [{ path: '/', component: Homepage, alias: '/home' }]

404 頁面

當使用者輸入錯誤網址時，可以導向404頁面

1
2
3
4
{
  path: '/:pathMatch(.*)*',
  component: () => import('../views/NotFound.vue'),
},

如上將使用者導向 NotFound.vue 元件。