1.在components里面建.vue文件的时候,不要建一个后缀为.vue的文件,而是右键——新建——Vue Component,然后改里面的代码即可
具体代码:
App.vue的代码:
<template>
<div>
<!--路由占位符-->
<router-view/>
</div>
</template>
<script>
export default {
name:'App'
}
</script>
<style >
</style>
index.js中的代码:
import Vue from 'vue'
import Router from 'vue-router'
import leftpageq from "../views/leftpageq.vue"
import left from "../components/left.vue"
import left1 from "../components/left1.vue"
import home from '../components/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/left1',
//name: 'home',
//components: {leftpage} ,
component:left1,
}
]
})
left1.vue里面的代码:
<template>
<div>
天天向上
</div>
</template>
<script>
// import __ from '__' // __是需要手动引入的文件
export default {
name: 'left1',
components: {},
data() {
//return {msg: '这个是Home模板页'}
return {}
},
methods: {}
}
</script>
<style lang="postcss" scoped>
/*body {
background-color: #ff0000;
}*/
</style>
浏览器展示: