Vue.js 2路由异常：Posts变量无法在组件中访问

你遇到的核心问题是路由组件没有接收到主实例传递的posts数据。路由配置里的props: true仅负责把URL路由参数（比如/post/:postId里的postId）作为props传给组件，完全不涉及主实例data中的posts属性。这就导致HomePostList组件的postsprops始终是undefined，v-if="posts"条件不满足，组件自然无法渲染内容。

快速修复方案：在<router-view>上绑定props传递数据 #

这是最贴合你现有代码逻辑的解决方式，直接通过父组件（主Vue实例）向路由组件传递数据：

1. 修改index.php中的<router-view>标签
   给<router-view>添加v-bind绑定，把主实例的posts传给路由组件：

   <!-- Main Post Container -->
   <router-view :posts="posts"></router-view>
   

2. 调整路由配置（可选但建议）
   既然我们是通过父组件传递props，不是依赖路由参数，就可以把路由配置里的props: true去掉，避免混淆：

   const routes = [
     { path: '/', component: HomePostList }, // 移除props: true
     { path: '/post/:postId', name: 'post', component: SinglePost }
   ];
   

做完这两步，HomePostList组件就能正常接收到主实例的posts数据，v-if="posts"会正确判断，axios请求完成后就能渲染文章列表了。

额外优化建议 #

• 更精准的空数据判断：初始时posts是空数组，而空数组在JS里属于truthy值，v-if="posts"会返回true。如果你想在没有数据时完全不渲染列表容器，可以改成v-if="posts.length > 0"。
• 添加加载状态：可以给主实例加一个loading属性，在axios请求前后切换状态，给用户更友好的反馈：

  // 主实例data新增loading状态
  data() {
    return{
      posts: [],
      searchTerm:'',
      searchPosts:[],
      currentRoute: window.location.pathname,
      loading: true
    }
  },
  created (){
    var $this = this;
    axios
      .get(apiRoot + 'posts?_embed')
      .then(function (response) {
        $this.posts = response.data;
        $this.loading = false;
      })
      .catch(() => {
        $this.loading = false; // 出错也关闭加载状态
      })
  },
  

  然后在index.php里添加加载提示：

  <router-view :posts="posts"></router-view>
  <div v-if="loading" class="cell medium-8">加载中...</div>
  

内容的提问来源于stack exchange，提问作者Nate Beers