本来一个页面里面只能有一个路由视图 对应 一个组件,现在可以多个路由视图(router-view) 对应 多个组件。
载入子页面
- 在routes中使用components属性,将组件名称及其组件对象包裹,由此可在页面中的router-view标签中添加name属性来对应路由组件,未定义name属性则默认填入default组件
- 在routes中使用children属性,并传入路由组件对象,可将其作为当前路由页面的子组件,跳转到该路由页面下,原先存在的父路由页面中的组件不会消失。(注意,子组件的path属性不能包括“/”,只需在router-link的to属性中写入完整路径即可)
- 在当前template标签结构中使用router-view标签来容纳此子页面的组件
<router-link to='/main_page/children' tag="button"> 载入子页面 </router-link>
var router=new VueRouter({ routes:[ { path:"/main_page", components:{//匹配路由地址下的名称显示对应组件,注意!!component要加s default:header,//default代表默认组件,即在router-view中的name 'left':leftBox, 'main':mainBox }, children:[//子页面中的组件 {path:"children",components:{'son_page':son_page}},//只有组件前有名称,router-view才会渲染对应的路由组件,否则只显示default未命名的 ] }, ] });
<div id="app"> <router-link to="/main_page">进入主页面</router-link> <router-view></router-view> <router-view name="left"></router-view> <router-view name="main"></router-view> </div> <template id="mainbox"> <h1 class='main'> 主体区域 <router-link to='/main_page/children' tag="button"> 载入子页面 </router-link> <router-view name='son_page'></router-view> </h1> </template>
载入二级页面
- 在跟当前路由页面组件相同的html结构中,使用router-view来存放新的二级页面的组件,其余的router-view标签由于没有匹配的路由组件,不会再渲染元素出来。
<div id="app"> <router-link to="/main_page">进入主页面</router-link> <router-view></router-view> <router-view name="left"></router-view> <router-view name="main"></router-view> <router-view name='second_page'></router-view> </div> <template id="mainbox"> <h1 class='main'> 主体区域 <router-link to='/main_page/children' tag="button"> 载入子页面 </router-link> <router-link to='/main_page/second' tag="button"> 跳转二级页面 </router-link> <router-view name='son_page'></router-view> </h1> </template>
- 在routes数组属性中放入二级页面的路由规则
routes:[ { path:"/main_page", components:{//匹配路由地址下的名称显示对应组件,注意!!component要加s default:header,//default代表默认组件,即在router-view中的name 'left':leftBox, 'main':mainBox }, children:[//子页面中的组件 {path:"children",components:{'son_page':son_page}},//只有组件前有名称,router-view才会渲染对应的路由组件,否则只显示default未命名的 ] }, { path:"/main_page/second", components:{//匹配路由地址下的名称显示对应组件,注意!!component要加s 'second_page':second_page,//二级页面 } }, ]
完整实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../../js/Vue.js" ></script>
<script src="../../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
<style>
.router-link-active{
color: red;
font-weight: 800;
}
body,html,h1{
padding: 0;
margin: 0;
}
.header{
height: 200px;
background-color: cornflowerblue;
text-align: center;
text-align: center;
}
.left{
float: left;
background-color: darkgray;
height: 500px;
}
.main{
overflow: hidden;
height: 500px;
background-color: yellowgreen;
text-align: center;
}
.son_page{
height: 200px;
background-color: navajowhite;
text-align: center;
margin-top: 20px;
}
.second_page{
height: 200px;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/main_page">进入主页面</router-link>
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
<router-view name='second_page'></router-view>
</div>
<template id="mainbox">
<h1 class='main'>
主体区域
<router-link to='/main_page/children' tag="button">
载入子页面
</router-link>
<router-link to='/main_page/second' tag="button">
跳转二级页面
</router-link>
<router-view name='son_page'></router-view>
</h1>
</template>
<script>
var header={
template:"<h1 class='header'>Header头部区域</h1>"
}
var leftBox={
template:"<h1 class='left'>左侧边栏区域</h1>"
}
var mainBox={
template:"#mainbox"
}
//路由切换,子组件
var son_page={
template:"<h1 class='son_page'>子数据</h1>"
}
//路由切换,第二套组件
var second_page={
template:"<h1 class='second_page'>第二个页面的数据</h1>"
}
var router=new VueRouter({
routes:[
{
path:"/main_page",
components:{//匹配路由地址下的名称显示对应组件,注意!!component要加s
default:header,//default代表默认组件,即在router-view中的name
'left':leftBox,
'main':mainBox
},
children:[//子页面中的组件
{path:"children",components:{'son_page':son_page}},//只有组件前有名称,router-view才会渲染对应的路由组件,否则只显示default未命名的
]
},
{
path:"/main_page/second",
components:{//匹配路由地址下的名称显示对应组件,注意!!component要加s
'second_page':second_page,//二级页面
}
},
]
});
var vm=new Vue({
el:"#app",
router:router,
});
</script>
</body>
</html>