为什么我的Vue实例是'；的属性和方法在模板中不可用？ 我设置了一个Vue.js CLI项目 在一个页面上，我想在data（）中定义一个变量，然后在我的模板中使用它 为什么下面的代码告诉我：

实例上未定义属性或方法“message”，但 在渲染期间引用。确保声明被动数据 数据选项中的属性

您需要在Page1和Page2组件的javascript周围添加

标记

---

否则，似乎

vue loader

会忽略该脚本，并且不会向您发出相关警告（只是模板中引用的数据丢失）。

您确定这些警告是针对这些组件的吗？您没有尝试在另一个尚未定义的组件中使用

消息

或

测试

？有时我也会这样不，这是我刚开始的一个非常简单的项目。正如上面的代码所示，我定义了

模板

部分，然后在它下面定义了

导出默认值

部分。奇怪的是，另一个项目中的另一个页面具有相同的结构。我必须设置某种配置才能让模板和导出默认部分相互了解吗？奇怪的是，它可以在Hello.vue页面上正常工作，但不能在其他页面上工作。我需要更改我的

/src/router/index.js

文件中的任何内容吗？（贴在上面）。就是这样，我完全没有看到。奇怪的是，它没有给我另一个错误，也没有在屏幕上显示代码。无论如何，谢谢。

<template>
    <div>
        <h1>Page 2</h1>
        <p> You can go back to
            <router-link to="/">home</router-link>.</p>
        <p>[{{message}}]</p>
    </div>
</template>

export default {
    name: "Page2",
    data() {
        return {
            message: "here it is"
        }
    }
}

            <button class="btn" @click="test()">the test</button>
        </p>
    </div>
</template>

export default {
    name: "Page2",
    data() {
        return {
            message: "here it is"
        }
    },
    methods: {
        test() {
            console.log('test');
        }
    }
}

<template>
  <div class="start alert alert-success" role="alert">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'start',
  data() {
    return {
      msg: 'Please choose an option.'
    }
  }
}
</script>

import Vue from "vue";
import Router from "vue-router";
import Home from "@/components/Home";
import Page1 from "@/components/Page1";
import Page2 from "@/components/Page2";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home
    },
    {
      path: "/page1",
      name: "Page1",
      component: Page1
    },
    {
      path: "/page2",
      name: "Page2",
      component: Page2
    }
  ]
});