解决 Vue.js 项目中 router-link 和路由不生效的常见问题

// router.js (错误示例)
import PostItem from './components/PostItem.vue';
import singlePost from'./components/singlePost.vue';

export default[ // 仅仅导出了一个数组
    {path:'/', component: PostItem},
    {path:'/post/:id', component: singlePost}
]

// router.js (正确配置)
import { createRouter, createWebHistory } from 'vue-router'; // 导入 createRouter 和 createWebHistory
import PostItem from './components/PostItem.vue';
import singlePost from './components/singlePost.vue';

// 导出 createRouter 的结果，即一个路由实例
export default createRouter({
  history: createWebHistory(), // 使用 HTML5 History 模式
  routes: [
    { path: '/', component: PostItem },
    { path: '/post/:id', component: singlePost }
  ],
});

// main.js (错误示例)
import { createApp } from 'vue';
import App from './App.vue';
// import router from './router'; // 可能未导入或未正确使用

createApp(App).mount('#app');

// main.js (正确配置)
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入前面定义的路由实例

createApp(App)
  .use(router) // 通过 app.use() 将路由实例挂载到应用
  .mount('#app');

<!-- App.vue (错误示例) -->
<template>
  <div id="app">
    <PostItem/> <!-- 直接渲染组件，不通过路由 -->
  </div>
</template>

<script>
import PostItem from './components/PostItem.vue';

export default {
  name: 'App',
  components: {
    PostItem
  }
}
</script>

<!-- App.vue (正确配置) -->
<template>
  <main>
    <router-view /> <!-- 渲染当前路由匹配的组件 -->
  </main>
</template>

<script>
export default {
  name: 'App',
}
</script>

<!-- singlePost.vue (错误示例) -->
<template>
    <div id="single-post">
        <h1>{{blog.title}}</h1> <!-- 错误：使用了不存在的 blog 属性 -->
        <p>{{blog.body}}</p>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                id: this.$route.params.id,
                post:{}
            }
        },
        created(){
            // 错误1: 使用了不存在的 this.$http
            // 错误2: 回调函数中使用普通函数，导致 this 上下文丢失
            this.$http.get('https://jsonplaceholder.typicode.com/posts/' + this.id).then(function(data){
                // 错误3: 只赋值了 data.body，而不是整个数据对象
                this.post = data.body;
            });
        }
    }
</script>

<!-- singlePost.vue (正确配置) -->
<template>
  <div id="single-post">
    <h1>{{ post.title }}</h1> <!-- 使用 post.title -->
    <p>{{ post.body }}</p>   <!-- 使用 post.body -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id, // 从路由参数获取 ID
      post: {}, // 初始化 post 为空对象
    };
  },
  created() {
    // 使用 fetch API 发送请求
    fetch('https://jsonplaceholder.typicode.com/posts/' + this.id)
      .then(resp => resp.json()) // 将响应转换为 JSON
      .then(data => {
        this.post = data; // 将整个数据对象赋值给 this.post
      })
      .catch(error => {
        console.error('获取博文详情失败:', error);
      });
  },
};
</script>

<style>
#single-post {
  max-width: 960px;
  margin: 0 auto;
}
</style>