Vue Router 的多级路由实现。
改写路由配置,为需要添加多级路由的页面,添加children属性。
具体案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌套路由之多级路由</title>
</head>
<!--1。引入文件-->
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<body>
<div id='app'>
<!--7.页面添加链接 和 视图区域-->
<router-link to='/account'>账户0</router-link>
<!--视图区域-->
<router-view></router-view>
</div>
<!--3.创建模板-->
<template id="account">
<div>
<h1>账户面板</h1>
<router-link to='/'></router-link>
<router-link to='/account/login'>登录</router-link>
<router-link to='/account/register'>注册</router-link>
<!--留出试图区域-->
<router-view></router-view>
</div>
</template>
<template id="login">
<div>
<h1>登陆面板</h1>
用户名:<input type="text" name="" id=""/><br/>
密码:<input type="password" name='' id=""/>
</div>
</template>
<template id="register">
<div>
<h1>注册面板</h1>
用户名:<input type="text" name="" id=""/><br/>
密码:<input type="password" name='' id=""/>
</div>
</template>
<script>
//创建模板
var tempAccount={template:"#account"};
var templogin={template:"#login"};
var tempregister={template:"#register"}
//4.模板注册成组件
Vue.component('account',tempAccount);
Vue.component('login',templogin);
Vue.component('register',tempregister)
//5.编写路由规则
var routeRules=new VueRouter({
routes:[
{
path:'/account',
component:tempAccount,
//children也是一个数组
children:[
//二级的多条路由规则 每个元素就是一条二级路由规则
{ path:'login',component:templogin},
{ path:'register',component:tempregister}
]
},
// {path:'/account/login',component:templogin},
// {path:'/account/register',component:tempregister}
]
});
var vm=new Vue({
el:'#app',
//6.注册路由规则
router:routeRules
});
//创建组件模板
</script>
</body>
</html>