when learning the simple example of vue-router, I found that the data data in the component could not be displayed on the page and did not report an error. What is the reason for this?
this is the html file
<body>
<div id="app">
<h1>vue-router</h1>
<router-link to="/home"></router-link>
<router-link to="/pageone">page1</router-link>
<router-view></router-view>
</div>
</body>
this is the js file
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("-sharpapp")the two vue files are
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"
}
}
} No error is reported in the browser, but it appears as
Click the home page
page1
so the data data in home.vue cannot be displayed. What is the problem?