文章目录
vue.js嵌套路由,如何使用?
总结说明:
- 注意绝对路径和相对路径的设置区别;
- 父子路由的嵌套与包含关系
- app.vue主视图的定义原则
- 其他重要未提及内容,请仔细研究,通过代码演示去了解体会
效果图预览:
相关文件代码:
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演示参考。