二级路由
二级路由的使用
- path不能用以 / 开头。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<title></title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
var vm = new Vue({
el:"#app",
router: new VueRouter({
routes:[
{path:"/tab1", component:{
template:`
<div>
<h1>tab1</h1>
</div>
`
}},
{
path:"/tab2",
component:{
template:`
<div>
<h1>tab2</h1>
<router-view></router-view>
</div>
`
},
children:[
{path:"user", component:{
template:`<div>user name</div>`
}},
{path:"info", component:{
template:`<div>infomation</div>`
}}
]
}
]
})
});
</script>
</body>
</html>
一级路由重定向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<title></title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
var vm = new Vue({
el:"#app",
router: new VueRouter({
routes:[
{path:"/tab1", component:{
template:`
<div>
<h1>tab1</h1>
</div>
`
}},
{
path:"/tab2",
component:{
template:`
<div>
<h1>tab2</h1>
<router-view></router-view>
</div>
`
},
children:[
{path:"user", component:{
template:`<div>user name</div>`
}},
{path:"info", component:{
template:`<div>infomation</div>`
}}
],
redirect:"/tab2/user"
}
]
})
});
</script>
</body>
</html>
一级路由传参
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<title></title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
var vm = new Vue({
el:"#app",
router: new VueRouter({
routes:[
{path:"/tab1", component:{
template:`
<div>
<h1>tab1</h1>
</div>
`
}},
{
path:"/tab2/:id",
component:{
template:`
<div>
<h1>tab2</h1>
<h2>{{$route.params.id}}</h2>
<router-view></router-view>
</div>
`
},
children:[
{path:"user", component:{
template:`<div>user name</div>`
}},
{path:"info", component:{
template:`<div>infomation</div>`
}}
]
}
]
})
});
</script>
</body>
</html>
- 二级路由传参。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<title></title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
var vm = new Vue({
el:"#app",
router: new VueRouter({
routes:[
{path:"/tab1", component:{
template:`
<div>
<h1>tab1</h1>
</div>
`
}},
{
path:"/tab2/:id",
component:{
template:`
<div>
<h1>tab2</h1>
<h2>{{$route.params.id}}</h2>
<router-view></router-view>
</div>
`
},
children:[
{path:"user/:name", component:{
template:`<div>user name:{{$route.params.name}}</div>`
}},
{path:"info", component:{
template:`<div>infomation</div>`
}}
]
}
]
})
});
</script>
</body>
</html>