vue.js嵌套路由

---

---

vue.js嵌套路由，如何使用？

---

总结说明：

1. 注意绝对路径和相对路径的设置区别；
2. 父子路由的嵌套与包含关系
3. app.vue主视图的定义原则
4. 其他重要未提及内容，请仔细研究，通过代码演示去了解体会

---

效果图预览：

---

相关文件代码：

1. main.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主体（页面初始化显示）
import App from './components/app.vue';
//一个个link对象 - 分类
import header from './components/header.vue';
import footer from './components/footer.vue';
import Music from './components/music.vue';
import Oumei from './components/oumei.vue';
import Guochan from './components/guochan.vue';


//注册全局头部、底部组件
Vue.component('headerVue',header);
Vue.component('footerVue',footer);




//安装插件
Vue.use(VueRouter);//挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
	//routes
	routes: [{
		//一个个link对象
		path:'/',
		redirect:{name:'music'},//默认去music
	},
	{//music配置
		name:'music',
		path:'/music',
		component:Music,
		children:[//复数
			{name:'oumei',path:'/oumei',component:Oumei},
			//name属性值：格式不固定，此处加上music_前缀，是为了标识归属关系，即music_oumei
			//path属性值：添加 / 表示绝对路径【http://localhost:8080/#/guochan】
			//path属性值：去除 / 表示相对路径【http://localhost:8080/#/music/guochan】
			{name:'guochan',path:'/guochan',component:Guochan}
		]
	}
    
  ]
});

// new Vue 启动 
new Vue({
  el: '#app',
  render: c => c(App),
  //让vue知道我们的路由规则
  router:router,//可以简写为router
})

---

2. app.vue文件

<template>
  <div>
  	
  	
  	<header-vue></header-vue>
  	<br />
	  	<!--留坑，非常重要-->
	  	<!--用来显示music-->
			<router-view class="main"></router-view>
		<br />
		<footer-vue></footer-vue>
		
		
		
  </div>
</template>

<script>
	export default {
	  data(){
	  	return{
	  		
	  	}
	  },
	  methods:{
	  	
	  }
	}
</script>

<style scoped>
	.main{height: 100px;border:dashed 2px red;}
</style>

---

3. header.vue文件

<template>
	<div>
		我是头部 - 导航
		<a href="#/">首页</a>
		<!--<a href="">音乐</a>-->
		<router-link :to="{name:'music'}">音乐</router-link>		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped>	
	div{height: 80px;background: palevioletred;}
</style>

---

4. footer.vue文件

<template>
  <div>
  	我是底部 - 版权信息
  	
  </div>
</template>

<script>
	export default {
	  data(){
	    return{
	     
	    }
	  },
	  methods:{
	  	
	  }
	}
</script>


<style scoped>
	div{height: 100px;background: skyblue;}
</style>

---

5. music.vue文件

<template>
	<div>
		
		
		欢迎来到音乐世界
		<!--<a href="">欧美音乐</a>
		<a href="">国产音乐</a>-->
		<router-link :to="{name:'oumei'}">欧美音乐</router-link>
		<router-link :to="{name:'guochan'}">国产音乐</router-link>
		<hr />
		
		<!--变化的音乐数据-->
		<router-view></router-view>
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		}
	}
</script>

<style scoped>
</style>

---

6. oumei.vue文件

<template>
	<div>
		我是欧美音乐
	</div>
</template>

<script>
</script>

<style scoped>
</style>

---

7. guochan.vue文件

<template>
	<div>
		我是国产音乐
	</div>
</template>

<script>
</script>

<style scoped>
</style>

---

以上就是关于“vue.js嵌套路由”的原理和基本使用的简单概述，可以作为demo演示参考。