鍍金池/ 問答/HTML/ vue-router 中組件內(nèi)無法獲取data值

vue-router 中組件內(nèi)無法獲取data值

在學(xué)習(xí)vue-router簡單的例子的時候，發(fā)現(xiàn)組件內(nèi)的data數(shù)據(jù)無法顯示在頁面中，也沒有報錯，請問這是什么原因呢？
這是html文件

<body>
    <div id="app">
    <h1>簡單的vue-router例子</h1>
    <p>
       <router-link to='/home'>首頁</router-link>
       <router-link to='/pageone'>page1</router-link>
    </p>
    <router-view></router-view>
    </div>

</body>

這是js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './vue/home.vue'
import Pageone from './vue/pageone.vue'
Vue.use(VueRouter);
const routes=[
    {path:'/home',component:Home},
    {path:'/pageone',component:Pageone}
];
const router=new VueRouter({routes})
const app=new Vue({
    router
}).$mount('#app')

兩個vue文件分別是

home.vue

<template>
<div>{{ msg }}</div>
</template>
export default {
   data () {
    return {
      msg: '這是home'
    }
  }
}

pageone.vue

<template>
<div>pageone</div>
</template>
export default{
    name:'pageone',
    data(){
    return {
    mag:'這是pageone'
    }
    }
}

瀏覽器中沒有報錯，但是顯示為
點擊首頁

clipboard.png

點擊page1

clipboard.png

所以無法顯示home.vue中的data數(shù)據(jù)，請問是因為什么問題呢？

回答
編輯回答
孤慣

你的vue中js部分沒有添加

<script>
export default {

}
</script>
2018年2月3日 18:34