diff --git a/src/router/modules/message.ts b/src/router/modules/message.ts
index 752cd4b..769b77d 100644
--- a/src/router/modules/message.ts
+++ b/src/router/modules/message.ts
@@ -36,6 +36,14 @@ const routes: Array<RouteRecordRaw> = [
         },
         component: () => import('@/views/message/index.vue'),
       },
+      {
+        path: 'message-detail',
+        name: 'message-detail',
+        meta: {
+          title: 'message',
+        },
+        component: () => import('@/views/message/content/Detail.vue'),
+      },
     ],
   },
 ]
diff --git a/src/views/message/content/Detail.vue b/src/views/message/content/Detail.vue
index 85475df..dc0f471 100644
--- a/src/views/message/content/Detail.vue
+++ b/src/views/message/content/Detail.vue
@@ -2,7 +2,7 @@
 import { reactive, ref, toRefs } from 'vue'
 import { useMessage } from 'naive-ui'
 import { format } from 'date-fns'
-
+import { useRoute } from 'vue-router'
 import { msgOne, readMsg } from '@/api/message/message'
 
 const props = defineProps({
@@ -11,33 +11,34 @@ const props = defineProps({
     default: '',
   },
 })
+
+const route = useRoute()
+
 const message = useMessage()
 const state: any = reactive({
-  detail: {},
+  detail: null,
 })
 const { detail } = toRefs(state)
 
 async function getDetail() {
-  const res = await msgOne({ id: props.id })
-  if (!state.detail.readFlag)
-    clearMsg()
-
+  const res = await msgOne({ id: route.query.id })
   if (res.code === 'OK')
     state.detail = res.data
-
+  if (!state.detail.readFlag)
+    clearMsg()
   else
     message.error(res.message)
 }
 
 async function clearMsg() {
-  const res = await readMsg({ msgid: props.id })
+  const res = await readMsg({ msgid: route.query.id })
 }
 
 getDetail()
 </script>
 
 <template>
-  <div class="wrapper-message">
+  <div v-if="detail" class="wrapper-message">
     <div class="left-card">
       <div class="title">
         {{ detail.titile }}
diff --git a/src/views/message/content/List.vue b/src/views/message/content/List.vue
index 7644c80..d0424a2 100644
--- a/src/views/message/content/List.vue
+++ b/src/views/message/content/List.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { reactive, ref, toRefs } from 'vue'
 import { format } from 'date-fns'
+import { useRoute, useRouter } from 'vue-router'
 import { getMessageList, readAllMsg, readMsg } from '@/api/message/message'
 import iconApproveActive from '@/assets/images/message/approve-active.png'
 import iconApprove from '@/assets/images/message/approve.png'
@@ -12,7 +13,8 @@ import iconClear from '@/assets/images/message/clear.png'
 import iconArrowDown from '@/assets/images/message/arrow-down.png'
 
 const emit = defineEmits(['goDetail'])
-
+const router = useRouter()
+const route = useRoute()
 const hasNextPage = ref(false)
 
 const state = reactive({
@@ -73,7 +75,8 @@ function goDetail(item) {
     clearMsgOne(item.id)
 
   else
-    emit('goDetail', item.id)
+    // emit('goDetail', item.id)
+    router.push({ name: 'message-detail', query: { id: item.id } })
 }
 
 async function clearMsgOne(id) {
@@ -198,7 +201,6 @@ function getMore() {
 
   .content{
     display: flex;
-    padding-right: 24px;
     .slider{
       .icon{
         width: 17px;
@@ -262,6 +264,7 @@ function getMore() {
       padding-bottom: 97px;
       box-sizing: border-box;
       height: calc(100vh - 88px - 76px);
+      padding-right: 24px;
 
       .more{
         display: flex;