index.js,index.vue,course.vue,master.vue等
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/index'
import Course from '@/components/course'
import Master from '@/components/master'
Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'index',
component: Index
},
{
path: '/course',
name: 'course',
component: Course
},
{
path: '/master',
name: 'master',
component: Master
}
]
})
<template>
<div>
主页
</div>
</template> <script>
export default{
name:"index",
data(){
return{ }
}
}
</script> <style scoped> </style>
<template>
<div>
课程页面
</div>
</template> <script>
export default{
name:"course",
data(){
return{ }
}
}
</script> <style scoped> </style>
<template>
<div>
<ul>
<li>
<router-link to="/">首页</router-link>
</li>
<li>
<router-link to="/course">课程</router-link>
</li>
<li>
<router-link to="/master">专家</router-link>
</li>
</ul>
</div>
</template> <script>
export default{
name:"navlist",
data(){
return{ }
}
}
</script> <style scoped>
a{
text-decoration: none;
color: #;
}
div{
width: %;
height: 50px;
background: #F1F1F1;
line-height: 50px;
}
ul{
list-style: none;
}
ul li{
float: left;
margin: 20px;
}
</style>
效果图
