版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38147456/article/details/84030101
直接上代码
1.router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
import header from '@/components/header'
import shouye from '@/components/shouye'
import kfzx from '@/components/kfzx'
import bangdan from '@/components/bangdan'
import xiazai from '@/components/xiazai'
import diantai from '@/components/diantai'
import mv from '@/components/mv'
import gedan from '@/components/gedan'
import geshou from '@/components/geshou'
import zxns from '@/components/zxns'
import hyzx from '@/components/hyzx'
import zhuce from '@/components/zhuce'
import play from '@/components/play'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: index,
children:[
{
path:"/",
name:"shouye",
component:shouye
},{
path:"/shouye/kfzx",
name:"kefu",
component:kfzx
},{
path:"/shouye/bangdan",
name:"bangdan",
component:bangdan
},{
path:"/shouye/xiazai",
name:"xiazai",
component:xiazai
},{
path:"/shouye/diantai",
name:"diantai",
component:diantai
},{
path:"/shouye/mv",
name:"mv",
component:mv
},{
path:"/shouye/gedan",
name:"gedan",
component:gedan
},{
path:"/shouye/geshou",
name:"geshou",
component:geshou
},{
path:"/shouye/play",
name:"play",
component:play
}
]
},{
path: '/zxns',
name: 'zxns',
component: zxns
},{
path: '/hyzx',
name: 'hyzx',
component: hyzx
},{
path:"/reg",
name:"zhuce",
component:zhuce
}
]
})
2.组件index.vue
<template>
<div class="index">
<myhead/>
<router-view></router-view>
<myfoot v-if="$route.path!='/shouye/play'"/>
<mylogin/>
</div>
</template>
<script>
import myhead from '@/components/header.vue'
import myfoot from '@/components/footer.vue'
import mylogin from '@/components/login.vue'
export default {
name: 'index',
data () {
return {
}
},
methods:{},
components:{
myhead,myfoot,mylogin
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index{
height: 100%;
}
</style>
把公共部分都放到index.vue中以组件形式引入,<router-view></router-view>
占个位置,用来陈放子组件。router/index.js定义组件和路由间的各种关系。
自写demo,仅供参自考