目录
使用说明
- 使用场景：1个路由规则对应多个组件
- 组件components：可配置多个组件，组件名称:组件对象
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>命名视图</title>
<!-- 6.创建样式 -->
<style>
html,body,p{
margin: 0;
padding: 0;
font-size: 25px;
}
.header{
background-color: palegreen;
height: 60px;
}
.container{
height: 500px;
display: flex;
}
.sidebar{
background-color:palevioletred;
flex: 2;
}
.content{
background-color: purple;
flex: 8;
}
.footer{
background-color: seagreen;
height: 100px;
}
</style>
</head>
<body>
<!-- 5.创建显示的标签 -->
<div id="app">
<!-- 展示匹配的路由组件 -->
<router-view name='top'></router-view>
<div class="container">
<router-view name='left'></router-view>
<router-view name='right'></router-view>
</div>
<router-view name='bottom'></router-view>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 1.导入路由文件 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//2.创建对应的组件
const header = {
template: '<p class="header">这是头部区域</p>'
}
const sidebar = {
template: '<p class="sidebar">这是左边栏</p>'
}
const content = {
template: '<p class="content">这是右侧内容区</p>'
}
const footer = {
template: '<p class="footer">这是底部区域</p>'
}
//3.创建路由对象
const router = new VueRouter({
routes:[
//*** 路由规则 路由和组件对应关系
{path:'/',components:{
//组件名称:组件对象
'top':header,
'left':sidebar,
'right':content,
'bottom': footer
}},
]
});
// 4.挂载路由对象
var vm = new Vue({
el:"#app",
data:{
},
methoods:{
},
router:router
});
</script>
</body>
</html>