From ef8040a99c655c68c20b92e8aceb47f64b7403c7 Mon Sep 17 00:00:00 2001
From: malagege <s9714020@gmail.com>
Date: Wed, 16 Jun 2021 22:51:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8D=95=E7=8D=B2=E6=89=80=E6=9C=89=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E6=88=96=20404=20Not=20found=20=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NotFound.vue    | 24 ++++++++++++++++++++++++
 src/components/User.vue        | 10 ++++++++++
 src/components/UserGeneric.vue | 20 ++++++++++++++++++++
 src/main.js                    |  6 ++++++
 4 files changed, 60 insertions(+)
 create mode 100644 src/components/NotFound.vue
 create mode 100644 src/components/UserGeneric.vue

diff --git a/src/components/NotFound.vue b/src/components/NotFound.vue
new file mode 100644
index 0000000..3cceeb0
--- /dev/null
+++ b/src/components/NotFound.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        Not Found 404
+        <br>
+        <button v-on:click="test"> on test</button>
+    </div>
+</template>
+
+
+<script>
+export default {
+    methods:{
+        test(){
+            console.log(this.$route.path.split('/'));
+            this.$router.push({
+            name: 'NotFound',
+            // :pathMatch 為 下面參數可以帶入
+            // http://localhost:3000/#/123/456
+            params: { pathMatch: ['123','456'] },
+            })
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/User.vue b/src/components/User.vue
index 9899b26..5ae4bde 100644
--- a/src/components/User.vue
+++ b/src/components/User.vue
@@ -1,6 +1,8 @@
 <template>
     <div>
         User  {{ $route.params.id }}
+        <br>
+        <button v-on:click="test"> on test</button>
     </div>
 </template>
 
@@ -20,5 +22,13 @@ export default {
     // this.userData = await fetchUser(to.params.id)
     console.log('to',to,'from',from);
   },
+    methods:{
+        test(){
+            this.$router.push({
+            name: 'NotFound',
+            params: { pathMatch: this.$route.path.split('/') },
+            })
+        }
+    }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/UserGeneric.vue b/src/components/UserGeneric.vue
new file mode 100644
index 0000000..69191b6
--- /dev/null
+++ b/src/components/UserGeneric.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        UserGeneric paramter.afterUser: {{ $route.params.afterUser}}
+        <br>
+
+    </div>
+</template>
+
+<script>
+export default {
+    methods:{
+        test(){
+            this.$router.push({
+            name: 'NotFound',
+            params: { pathMatch: this.$route.path.split('/') },
+            })
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index af9975a..23064e6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,8 @@ import App from './App.vue'
 import Home from './components/Home.vue'
 import About from './components/About.vue'
 import User from './components/User.vue'
+import NotFound from './components/NotFound.vue'
+import UserGeneric from './components/UserGeneric.vue'
 
 
 // 2. 定義一些路由
@@ -14,6 +16,10 @@ const routes = [
     { path: '/about', component: About },
     // 動態段以冒號開始
     { path: '/users/:id', component: User },
+    // 將匹配所有內容並將其放在 `$route.params.pathMatch` 下
+    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
+    // 將匹配以 `/user-` 開頭的所有內容，並將其放在 `$route.params.afterUser` 下
+    { path: '/user-:afterUser(.*)', component: UserGeneric },
   ]
   
 // 3. 創建路由實例並傳遞 `routes` 配置