文章目录
前言
在浏览网页时,我们常常会看到这样的许多URL,这其实就会让我们意识到,这个html文件是在组件这个文件夹下面的一个子文件,同样,我们也希望在设计登录界面时,能由一个主页(假设URL为/account),点击登录按钮(假设URL为/login)后,URL变成/account/login,这样用VueRouter该怎么实现呢?
VueRouter提供了children这样一个属性来实现路由的嵌套
路由的嵌套
其实就是在配置一个路由规则的基础上,加上children这个参数,那子路由肯定不止一个,因此children这个值应该时数组的形式,在其中包含两个子路由。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../vue.js" type="text/javascript"></script>
<script src="../../vue-router.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<template id='temp1'>
<div>
<h1>account</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script type="text/javascript">
let account={
template:'#temp1'
}
let login={
template:'<h1>login</h1>'
}
let register={
template:'<h1>register</h1>'
}
let router=new VueRouter({
routes:[
{
path:'/account',component:account,
children:[
{path:'login',component:login},
{path:'register',component:register}
]
}
]
})
let vm=new Vue({
el:'#app',
data:{
},
methods:{
},
router
})
</script>
</html>
路由的命名实现标准布局
路由是可以给定对应的名字的,因此,如果想要测试路由是否能通过命名来实现不同的页面,从而实现如下的布局
这里VueRouter给定了routes属性,也就是路由规则中的components属性。
let header={
template:'<h1 class="myheader">Header头部区域</h1>'
}
let left={
template:'<h1 class="myleft">left侧边栏区域</h1>'
}
let mainbox={
template:'<h1 class="mymain">mainbox主体区域</h1>'
}
let router=new VueRouter({
routes:[
{
path:'/',components:{
'default':header,
'left':left,
'main':mainbox
}
}
]
})
这里指定的各种组件的名字,例如左边组件的left,对应的到router-view
中就是卸载name
属性中的,main也是同理
<div id="app">
<router-view></router-view>
<div class="box">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
注意,这里的属性和原来的component
相比,多了一个s,也就意味着这个是放多个组件的。还有就是一个默认路由的指定,如果给它配置名为default
,那就意味着如果不为router-view
指定name
属性,那就会默认呈现这个组件
总结
例如:以上就是今天要讲的内容,基本上把路由的基础操作都已经分析完毕了。如有不足,还望指正!