实现跳转到帖子

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue

@@ -1,18 +1,21 @@
 <!-- 模板部分，生成HTML -->
 <template>
   <div id="app">
-    <MainPage />
+    <Header />
+    <RouterView></RouterView>
   </div>
 </template>
 
 <!-- 控制模板数据与行为 -->
 <script>
-import MainPage from './components/MainPage.vue';
-
+//import MainPage from './components/MainPage.vue';
+import Header from './components/Header.vue';
+import {RouterView} from 'vue-router';
 export default {
   name: 'App',
   components: {
-    MainPage
+    Header,
+    RouterView
   }
 }
 </script>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue

@@ -38,7 +38,7 @@
 
 <script>
 import { ref } from 'vue';
-
+import { useRouter } from 'vue-router';
 export default {
     name: 'PostPage',
     setup() {
@@ -88,7 +88,7 @@ export default {
         ]);
 
         const filteredPosts = ref(posts.value);
-
+        const router = useRouter();
         const selectCategory = (category) => {
             selectedCategory.value = category;
             filteredPosts.value =
@@ -98,9 +98,7 @@ export default {
         };
 
         const goToPostDetail = (postId) => {
-            const url = `/post/${postId}`;
-            console.log('Opening URL:', url);
-            window.open(`/post/${postId}`, '_blank');
+            router.push({ name: 'PostDetail', params: { id: postId } });
         };
 
         return {

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js

@@ -1,9 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import Login from '../components/Login.vue';
 import Register from '../components/Register.vue';
-import PostDetail from '@/components/PostDetail.vue';
-import MainPage from '@/components/MainPage.vue';
-
+import PostDetail from '@/views/PostDetail.vue';
+import MainPage from '@/views/MainPage.vue';
+import UserPage from '@/views/UserPage.vue';
 
 const routes = [
   {
@@ -26,11 +26,15 @@ const routes = [
     name: 'PostDetail', 
     component: PostDetail 
   },
-
+  {
+    path: '/user',
+    name: 'UserPage',
+    component: UserPage
+  }
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(/*process.env.BASE_URL*/),
   routes
 });
 

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/MainPage.vue

@@ -1,6 +1,5 @@
 <template>
     <div>
-        <Header />
         <div class="top-container">
             <NoticeBoard />
             <WelcomeCalendar />
@@ -17,15 +16,13 @@
 </template>
 
 <script>
-import Header from './Header.vue';
-import NoticeBoard from './NoticeBoard.vue';
-import WelcomeCalendar from './WelcomeCalendar.vue';
-import PostPage from './PostPage.vue';
+import NoticeBoard from '@/components/NoticeBoard.vue';
+import WelcomeCalendar from '@/components/WelcomeCalendar.vue';
+import PostPage from '@/components/PostPage.vue';
 //import UserPage from './UserPage.vue';
 // import PostDetail from './PostDetail.vue';
 export default {
     components: {
-        Header,
         NoticeBoard,
         WelcomeCalendar,
         PostPage,