---
# System prepended metadata

title: 404頁面、重新導向 (7-9)
tags: [7. Router路由, Vue]

---

# 404頁面、重新導向 (7-9)
###### tags: `Vue`、`7. Router路由`
2022.3.10

#####  &emsp;&emsp;當網址輸入錯誤時，未設404頁面畫面會直接空白，因此要設定404頁面來告知使用者，網址輸入錯誤，此頁面並不存在。

### 1. 導向404頁面
##### &emsp;&emsp;製作一個專屬的404頁面，當使用者網址輸入錯誤時，就導向此頁面。
```
{
    path: '/:pathMatch(.*)*',
    component: () => import('404頁面檔案路徑'),
  },
```
**(1) 新增404頁面**

![](https://i.imgur.com/ytSXwdD.png)

**(2) 新增路由導向**

![](https://i.imgur.com/OUmPFLJ.png)

### 2. 重新導向
##### &emsp;&emsp;當使用者輸入網址錯誤時，畫面會自動重新導向正確頁面。
**(1) 只要輸入網址錯誤，都會被導回主頁。**
```
{
    path: '/:pathMatch(.*)*',
    redirect: {
      name: 'home',
    },
},
```
![](https://i.imgur.com/0LqvSeC.png)
