vue二级路由的设计

版权声明：本文为博主原创文章，未经博主允许不得转载。 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，仅供参自考