vue 嵌套路由例子
程序员文章站
2022-04-12 09:53:25
...
需求：
首页： /index
订单： /order
美食： /food
美食中有：
蛋糕： /food/cake
大米： /food/rice
鸡蛋： /food/egg
而cake,rice,egg三个模块版式不同，所以并不适合用动态路由
美食组件不同于其他两个组件
var Foods={
template:`
<div>这是foods中的内容
<router-link to="/foods/cake">蛋糕</router-link>
<router-link to="/foods/rice">大米</router-link>
<router-link to="/foods/egg">鸡蛋</router-link>
<router-view></router-view>
</div>
`
}美食组件的路由表有个children属性，children是个数组，里面放了子组件的路径
{
path:"/foods",
component:Foods,
children:[
//刚进来时在cake页面
{
path:"/foods/",
redirect:"cake"
},
{
path:"/foods/rice",
component:Rice
},
{
path:"/foods/egg",
component:Egg
},
{
name:"cake",
path:"/foods/cake",
component:Cake
}
]
}全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
nav{
position: fixed;
display: flex;
width:100%;
bottom:0;
}
nav a{
color:blue;
flex-grow:1;
height: 80px;
line-height:80px;
text-align: center;
border:solid 1px blue
}
nav a.active{
background-color: blue;
color:#fff;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
<nav>
<router-link to="/" >首页</router-link>
<router-link to="/order">订单</router-link>
<router-link to="/foods">美食</router-link>
</nav>
</div>
<script src="../js/vue.js"></script>
<script src="vue-router.js"></script>
<script>
var Index={
template:`
<div>这是首页中的内容</div>
`
}
var Order={
template:`
<div>这是订单中的内容</div>
`
}
var Foods={
template:`
<div>这是foods中的内容
<router-link to="/foods/cake">蛋糕</router-link>
<router-link to="/foods/rice">大米</router-link>
<router-link to="/foods/egg">鸡蛋</router-link>
<router-view></router-view>
</div>
`
}
var Cake={
template:`
<div>
<h2>这是蛋糕内容</h2>
<hr>
<div style="height:100px;background-color:red"></div>
</div>
`
}
var Rice={
template:`
<div>
<h2>这是大米内容</h2>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
`
}
var Egg={
template:`
<div>
<h2>这是鸡蛋内容</h2>
<div style="width:25%;height:400px;background-color:red;float:left"></div>
<div style="width:75%;height:400px;background-color:blue"></div>
</div>
`
}
var routes=[
{
path:"/",
component:Index
},
{
path:"/order",
component:Order
},
{
path:"/foods",
component:Foods,
children:[
//刚进来时在cake页面
{
path:"/foods/",
redirect:"cake"
},
{
path:"/foods/rice",
component:Rice
},
{
path:"/foods/egg",
component:Egg
},
{
name:"cake",
path:"/foods/cake",
component:Cake
}
]
}
]
var router=new VueRouter({
routes,
linkExactActiveClass: 'active'
})
var vm = new Vue({
el:"#app",
router
})
</script>
</body>
</html>
</html>