- 静态嵌套路由：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/green">green</router-link>
<router-link to="/fruit">fruit</router-link>
<router-view></router-view>
</div>
<template id="green">
<div>蔬菜
<router-link to="/green/organic">有机</router-link>
<router-link to="/green/inorganic">无机</router-link>
<router-view></router-view>
</div>
</template>
<template id="fruit">
<div>水果
<router-link to="/fruit/sweet">甜的</router-link>
<router-link to="/fruit/acid">酸的</router-link>
<router-view></router-view>
</div>
</template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的
let green={template:'#green'}
let organic={template:"<div>有机蔬菜organic</div>"}
let inorganic={template:"<div>无机蔬菜inorganic</div>"}
let fruit={template:'#fruit'}
let sweet={template:"<div>甜的</div>"}
let acid={template:"<div>酸的</div>"}
//路由路径映射表
let routes=[
//路由默认去的第一个组件
{
path:'',
component:green
},
{
path:"/green",
component:green,
children:[
{
path:"",
component:organic
},
{
path:"organic",
component:organic
},
{
path:"inorganic",
component:inorganic
}
]
},
{
path:"/fruit",
component:fruit,
children:[
{
path:"",
component:sweet
},
{
path:"sweet",
component:sweet
},
{
path:"acid",
component:acid
}
]
},
//所有没有找到时候，去地址/green的组件
{
path:"*",
redirect:'/green'
}
]
//实例化一个路由
let router=new VueRouter({
routes
})
let vm=new Vue({
el:"#app",
data:{
},
router
})
</script>
</html>
嵌套路由要通过子路由的方式实现，如果改成以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/green">green</router-link>
<router-link to="/fruit">fruit</router-link>
<router-view></router-view>
</div>
<template id="green">
<div>蔬菜
<router-link to="/green/organic">有机</router-link>
<router-link to="/green/inorganic">无机</router-link>
<router-view></router-view>
</div>
</template>
<template id="fruit">
<div>水果
<router-link to="/sweet">甜的</router-link>
<router-link to="/acid">酸的</router-link>
<router-view></router-view>
</div>
</template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的
let green={template:'#green'}
let organic={template:"<div>有机蔬菜organic</div>"}
let inorganic={template:"<div>无机蔬菜inorganic</div>"}
let fruit={template:'#fruit'}
let sweet={template:"<div>甜的</div>"}
let acid={template:"<div>酸的</div>"}
//路由路径映射表
let routes=[
//路由默认去的第一个组件
{
path:'',
component:green
},
{
path:"/green",
component:green,
children:[
{
path:"",
component:organic
},
{
path:"organic",
component:organic
},
{
path:"inorganic",
component:inorganic
}
]
},
{
path:"/fruit",
component:fruit
},
{
path:"/sweet",
component:sweet
},
{
path:"/acid",
component:acid
},
//所有没有找到时候，去地址/green的组件
{
path:"*",
redirect:'/green'
}
]
//实例化一个路由
let router=new VueRouter({
routes
})
let vm=new Vue({
el:"#app",
data:{
},
router
})
</script>
</html>
首先没法用类似/fruit/sweet的路由跳转
用/sweet这样的路由，会把模板渲染到第一个router-view里
- 把fruit里的两种类型变成动态参数（接收任意水果类型作为动态参数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/green">green</router-link>
<router-link to="/fruit">fruit</router-link>
<router-view></router-view>
</div>
<template id="green">
<div>蔬菜
<router-link to="/green/organic">有机</router-link>
<router-link to="/green/inorganic">无机</router-link>
<router-view></router-view>
</div>
</template>
<template id="fruit">
<div>水果
<router-link to="/fruit/sweet">甜的</router-link>
<router-link to="/fruit/acid">酸的</router-link>
<router-view></router-view>
</div>
</template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的
let green={template:'#green'}
let organic={template:"<div>有机蔬菜organic</div>"}
let inorganic={template:"<div>无机蔬菜inorganic</div>"}
let fruit={template:'#fruit'}
let fruittype ={template:"<div>{{ $route.params.type }}</div>"}
//let sweet={template:"<div>甜的</div>"}
//let acid={template:"<div>酸的</div>"}
//路由路径映射表
let routes=[
//路由默认去的第一个组件
{
path:'',
component:green
},
{
path:"/green",
component:green,
children:[
{
path:"",
component:organic
},
{
path:"organic",
component:organic
},
{
path:"inorganic",
component:inorganic
}
]
},
{
path:"/fruit",
component:fruit,
children:[
{
path: '/',
redirect: 'sweet'
},
{
path:":type",
component:fruittype
}
]
},
]
//实例化一个路由
let router=new VueRouter({
routes
})
let vm=new Vue({
el:"#app",
data:{
},
router
})
</script>
</html>