第4章 插件-路由
程序员文章站
2022-07-12 18:52:11
...
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
简单的路由
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
<script src="js/vue-router.js"></script>
<link rel="stylesheet" href="css/animate.css">
</head>
<div id="app">
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/my">我的</router-link>
<router-link to="/default">默认</router-link>
<router-view ></router-view>
</div>
<template id="main">
<!-- 可以单独书写动画 -->
<transition enter-active-class="animated fadeIn">
<h1>这是主页{{msg}}</h1>
</transition>
</template>
<template id="news">
<h1>这是新闻</h1>
</template>
<script>
// 可以通过import引入。
// 创建路由组件
var home={
template:'#main',
data(){
return {
msg:'内容。。。。。'
}
}
}
var news={
template:'#news'
}
// 配置路由
var router=new VueRouter({
routes:[
{path:'/home',component:home},
// 配置的是组件
{path:'/news',component:news},
// 重定向
{path:'*',redirect:'/home'},
// {path:'/my',redirect:'/news'}
]
})
//
new Vue({
el:'#app',
// router:router 属性和值一样的时候，可以直接简写：
router
})
</script>
<body>
</body>
</html>
路由嵌套
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="js/vue.min.js"></script>
<script src="js/vue-router.js"></script>
<style>
/* 显示对应组件的时候才有的类 */
.router-link-active{
color: red;
font-size: 20px;
}
*{
margin: 0px;
padding: 0px;
list-style: none;
}
#app,body,html{
width: 100%
}
#app ul{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
}
#app ul li{
float: left;
width: 25%;
text-align: center;
}
ol li{
margin-bottom: 20px;
text-indent: 2em;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li><router-link to="/buy">外卖</router-link></li>
<li><router-link to="/find">发现</router-link></li>
<li><router-link to="/order">订单</router-link></li>
<li><router-link to="/my">我的</router-link></li>
</ul>
<router-view ></router-view>
</div>
<template id="buy">
<main>
<h1>外卖</h1>
<router-link to="/food">食物</router-link>
<router-link to="/drink">饮料</router-link>
<router-link to="/taste">甜品</router-link>
<router-view></router-view>
</main>
</template>
<script>
var buy={
template:'#buy'
}
var find={
template:'<h1>发现</h1>'
}
var order={
template:'<h1>订单</h1>'
}
var my={
template:'<h1>我的</h1>'
}
var food={
template:`
<ol>
<li v-for="v in list ">{{v.content}}</li>
</ol>
`,
data(){
return{
list: [
{
"content": "有一天晚上我俩一起吃西瓜，老大把西瓜籽很整洁的吐在了一张纸上，\r\n过了几天，我从教室回但宿舍看到老大在磕瓜子，\r\n我就问他：老大，你什么时候买的瓜子？\r\n老大说：刚晒好，说着抓了一把要递给我……",
"hashId": "bcc5fdc2fb6efc6db33fa242474f108a",
"unixtime": 1418814837,
"updatetime": "2014-12-17 19:13:57"
},
{
"content": "还说神马来一场说走就走的旅行，\r\n工作后就连一场说走就走的下班都不行。",
"hashId": "10edf75c1e7d0933c91f0f39a28a2c84",
"unixtime": 1418814837,
"updatetime": "2014-12-17 19:13:57"
},
{
"content": "高速路上堵车，路边葡萄地里有一哥们竟然在偷葡萄，心想太没素质了吧！\r\n不管了我也去，刚溜进葡萄地，那哥们竟问我干嘛，\r\n我撇了一眼反问道你干嘛呢？\r\n那哥们答道摘葡萄呢！\r\n我答道：我也摘葡萄呢！\r\n哥们郁闷了说我摘我家的你呢？\r\n我顿时脸红，哥你家葡萄咋卖呢？",
"hashId": "bb572bb5b4844badb31012983f7324f5",
"unixtime": 1418814837,
"updatetime": "2014-12-17 19:13:57"
},
{
"content": "和老婆在街边散步，我手上捏着一张已揉成一团的传单，\r\n走了好一会终于看到个垃圾桶，我赶紧跑过去想扔掉，\r\n没想到老婆从后边一把拉住我说：老公，那个肯定吃不得了，别捡。\r\n我一愣，发现垃圾桶顶盖上放着半个西瓜。",
"hashId": "7ebccd3bbfaf24e010f9eb3ee68234bd",
"unixtime": 1418814837,
"updatetime": "2014-12-17 19:13:57"
},
{
"content": "某考生考了个倒数第一，回到家被他爸一顿暴揍，\r\n来到学校老师让他谈谈落后的体会，\r\n学生：“我终于明白了“落后就要挨打”的道理。”",
"hashId": "4aee2aa6a79c67682f605c4146a8eca4",
"unixtime": 1418814837,
"updatetime": "2014-12-17 19:13:57"
},
{
"content": "很多人不喜欢朝九晚五的生活，然后开始创业。\r\n最终，他的生活变成了朝五晚九。",
"hashId": "7b358c4b96cf4a8d82b85545ea8f9603",
"unixtime": 1418814837,
"updatetime": "2014-12-17 19:13:57"
},
{
"content": "钱这个东西，真是害人精。\r\n小到人与人之间的矛盾，大到国家之间的战争，无不是为了钱。\r\n钱可以把人推上万众瞩目之颠，也可以使人瞬间变成阶下囚。\r\n可是，富人们却没认识到，当钱几辈子花不完时，\r\n挣再多已经没有意义，还不如早日尽点社会责任，\r\n捐助给需要的人，求得个平安幸福。\r\n看到这个的有钱人们呐，你们什么时侯能捐我点啊！",
"hashId": "94e18075f8c9c8211dfed5f8d6a62983",
"unixtime": 1418814837,
"updatetime": "2014-12-17 19:13:57"
},
{
"content": "看到一句很好的名言：我们无法拉伸生命的长度，但是我们可以拓展生命的宽度。\r\n我觉得这句话太有道理了！\r\n意思就是：虽然我们无法再长高了，但是我们还可以继续长胖。",
"hashId": "fd8e364a4c70d46e77c1610879748a9a",
"unixtime": 1418814837,
"updatetime": "2014-12-17 19:13:57"
},
{
"content": "女生口中所说的“理工男好萌好棒好想嫁！”，\r\n其实理工男是指“会修电脑、会设置手机、会安家用电器、\r\n会帮做PPT打EXCEL表PS修图、话少、高冷、专一、不和乱七八糟的女生来往、\r\n不爱打扮却又干净清爽、高高瘦瘦、手指纤长、戴黑框眼镜超好看的帅哥”。\r\n其实找个帅哥让他学电脑，再戴个眼镜就OK了。",
"hashId": "5001c08a3cc8a281b15c467bc15a4911",
"unixtime": 1418814837,
"updatetime": "2014-12-17 19:13:57"
}
]
}
}
}
var drink={
template:'<h1>drink</h1>'
}
var taste={
template:'<h1>taste</h1>'
}
var rou=new VueRouter({
routes:[
{
path:'/buy',
component:buy,
//关键代码,配置子路由.
children:[
{path:'/food',component:food},
{path:'/drink',component:drink},
{path:'/taste',component:taste},
]
},
{path:'/find',component:find},
{path:'/order',component:order},
// {path:'/',redirect:'/buy'}
// 刚进入页面显示buy组件。
{path:'*',redirect:'/buy'}
// 重定向：只要导航找不到对应的组件，都跳转到buy
]
});
new Vue({
el:'#app',
router:rou
})
</script>
</body>
</html>