From ece3dffe063648cfe7263b2fc010fd6052941c98 Mon Sep 17 00:00:00 2001
From: DevilTea <ch19980814@gmail.com>
Date: Thu, 7 Jul 2022 02:45:43 +0800
Subject: [PATCH] feat(useRouteParams): new function (#1173)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/router/index.ts                |  1 +
 packages/router/useRouteParams/index.md | 20 ++++++++++++++++
 packages/router/useRouteParams/index.ts | 32 +++++++++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 packages/router/useRouteParams/index.md
 create mode 100644 packages/router/useRouteParams/index.ts

diff --git a/packages/router/index.ts b/packages/router/index.ts
index b1e6bcb0f5c..02d651818a6 100644
--- a/packages/router/index.ts
+++ b/packages/router/index.ts
@@ -1,2 +1,3 @@
 export * from './useRouteHash'
 export * from './useRouteQuery'
+export * from './useRouteParams'
diff --git a/packages/router/useRouteParams/index.md b/packages/router/useRouteParams/index.md
new file mode 100644
index 00000000000..992f12e0ecb
--- /dev/null
+++ b/packages/router/useRouteParams/index.md
@@ -0,0 +1,20 @@
+---
+category: '@Router'
+---
+
+# useRouteParams
+
+Shorthand for reactive route.params
+
+## Usage
+
+```ts
+import { useRouteParams } from '@vueuse/router'
+
+const userId = useRouteParams('userId')
+
+const userId = useRouteParams('userId', '-1') // or with a default value
+
+console.log(userId.value) // route.params.userId
+userId.value = '100' // router.replace({ params: { userId: '100' } })
+```
diff --git a/packages/router/useRouteParams/index.ts b/packages/router/useRouteParams/index.ts
new file mode 100644
index 00000000000..a6f84a2cb0f
--- /dev/null
+++ b/packages/router/useRouteParams/index.ts
@@ -0,0 +1,32 @@
+import type { Ref } from 'vue-demi'
+import { computed, nextTick, unref } from 'vue-demi'
+import { useRoute, useRouter } from 'vue-router'
+import type { ReactiveRouteOptions } from '../_types'
+
+export function useRouteParams(name: string): Ref<null | string | string[]>
+export function useRouteParams<T extends null | undefined | string | string[] = null | string | string[]>(name: string, defaultValue?: T, options?: ReactiveRouteOptions): Ref<T>
+export function useRouteParams<T extends string | string[]>(
+  name: string,
+  defaultValue?: T,
+  {
+    mode = 'replace',
+    route = useRoute(),
+    router = useRouter(),
+  }: ReactiveRouteOptions = {},
+) {
+  return computed<any>({
+    get() {
+      const data = route.params[name]
+      if (data == null)
+        return defaultValue ?? null
+      if (Array.isArray(data))
+        return data.filter(Boolean)
+      return data
+    },
+    set(v) {
+      nextTick(() => {
+        router[unref(mode)]({ params: { ...route.params, [name]: v } })
+      })
+    },
+  })
+}