您的位置：首页 > Web前端 > Vue.js

vue 嵌套路由例子

2018-12-19 15:44 323 查看

需求：

首页： /index

订单： /order

美食： /food

美食中有：

蛋糕： /food/cake

大米： /food/rice

鸡蛋： /food/egg

而cake,rice,egg三个模块版式不同，所以并不适合用动态路由

美食组件不同于其他两个组件

[code]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是个数组，里面放了子组件的路径

[code]{
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
}
]
}

全部代码

[code]<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航