chore: new article

.vscode/md.json.code-snippets

@@ -0,0 +1,19 @@
+{
+	"For Loop": {
+	  "prefix": ["ok", "for-const"],
+	  "body": [
+		"for (const ${2:element} of ${1:array}) {",
+		"\t$0",
+		"}"
+	  ],
+	  "description": "A for loop."
+	},
+	"Ok": {
+	  "prefix": "ok",
+	  "body": [
+		"console.log('OK');"
+	  ],
+	  "description": "Print OK to the console."
+	}
+  }
+

docs/.vitepress/cache/deps/_metadata.json

@@ -1,31 +1,31 @@
 {
-  "hash": "446d40e3",
-  "configHash": "6c6edbbb",
-  "lockfileHash": "b34d2fa7",
-  "browserHash": "d111c7b4",
+  "hash": "f3242232",
+  "configHash": "fe60ac90",
+  "lockfileHash": "762acec5",
+  "browserHash": "1be8925e",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "d2790375",
+      "fileHash": "5493afa5",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "cec96a55",
+      "fileHash": "0826081b",
       "needsInterop": false
     },
     "vitepress > @vueuse/core": {
       "src": "../../../../node_modules/@vueuse/core/index.mjs",
       "file": "vitepress___@vueuse_core.js",
-      "fileHash": "af9ebbbe",
+      "fileHash": "974ad42e",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-RY5ODQAQ": {
-      "file": "chunk-RY5ODQAQ.js"
+    "chunk-MNKFN2UC": {
+      "file": "chunk-MNKFN2UC.js"
     }
   }
 }

docs/index.md

@@ -22,13 +22,23 @@ features:
     title: Vue Mastery
     details: Deep dives into Vue.js architecture and component design patterns.
     link: https://vuejs.org/
+  - icon: 
+      src: /vue-router.png
+    title: Vue router
+    details: Currently using Vue router.
+    link: https://router.vuejs.org/
+  - icon: 
+      src: /pinia.svg
+    title: Pinia
+    details: Currently using Pinia.
+    link: https://pinia.vuejs.org/
   - icon: 
       src: /nuxt_logo.png
     title: Nuxt
     details: Currently using Nuxt.
     link: https://nuxt.com/
   - icon: 
-      src: /vuetify.png
+      src: /vuetify-logo-light-atom.svg
     title: Vuetify
     details: Currently using Vuetify.
     link: https://vuetifyjs.com/en/
@@ -54,4 +64,3 @@ aboutMe:
 
 ---
 
-

docs/vue相關/post.data.js

@@ -1,4 +1,4 @@
 // posts.data.js
 import { createContentLoader } from 'vitepress'
 
-export default createContentLoader('*/*.md', /* options */)
+export default createContentLoader('*/*.md', /* options */)

docs/vue相關/vue-router.md

@@ -0,0 +1,57 @@
+---
+title: vue router 傳參
+---
+
+# 問題：要如何做到在搜尋頁面搜尋時，在網址加上參數，這樣回到上一頁時就可以保留之前的搜尋狀態?
+### 當在搜尋頁面進行搜尋時，使用 router.push() 將搜尋參數加到 URL 上。<br>在 mounted 取得這些參數。這樣，即使切換到其他頁面，再回到搜尋頁面時，網址也會保留先前的搜尋參數。
+::: code-group
+```js vue [script]:line-numbers {1}
+const route = useRoute()
+const router = useRouter()
+
+const search1 = ref('')
+const search = ref('')
+
+const go = () => {
+    search.value = search1.value
+    router.push({ name: 'domainname', query: { keyword: search.value,keyword1: search.value, } }) // [!code warning]
+}
+onMounted(() => {
+    search1.value = route.query.keyword
+    search.value = route.query.keyword
+})
+```
+```js vue [template]
+<v-layout row wrap>
+    <v-text-field
+        v-model="search1"
+        label="Search"
+        prepend-inner-icon="mdi-magnify"
+        variant="outlined"
+        hide-details
+        single-line
+    ></v-text-field>
+    <v-btn color="success" @click="go">go</v-btn>
+    <v-data-table 
+        :items="data"
+        hover
+        :headers="headers"
+        item-key="name"
+        :search="search"
+    >
+        <template v-slot:item.link="{ value }">
+            <v-btn :to="value" nuxt>
+                go see
+            </v-btn>
+        </template>
+    </v-data-table>    
+</v-layout>
+```
+:::
+---
+::: danger 提醒
+使用i18n相關套件要注意route name是否被改，如domainname被改成domainname___18n
+:::
+
+
+>