一、需要达到的效果
原图效果:
仿写效果:
二、需要用到的知识
- html
- css
- javascript、vue
三:源代码及注释
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue路由练习</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="icon" type="text/css" href="http://i2.muimg.com/567571/e0565125397e23c4.jpg">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<div class="a">
<router-link to="/recommend">推荐</router-link>
<router-link to="/society">社会</router-link>
<router-link to="/recreation">娱乐</router-link>
<router-link to="/military">军事</router-link>
<router-link to="/education">体育</router-link>
</div>
<router-view></router-view>
</div>
</body>
<script type="text/javascript" src="js/index.js"></script>
</html>
css部分:
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
#app{
width: 490px;
border: 2px solid #666;
margin:5px auto;
}
#app .a{
padding: 10px;
border-bottom: 2px solid #666;
}
a{
display: inline-block;
width: 90px;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
font-size:20px;
background-color: #0AA770;
color:#fff;
border:2px solid #034D34;
}
#app div:last-child{
padding:10px;
text-align: center;
}
img{
width: 400px;
height: 300px;
}
javascript、vue部分:
var recommend = {
template:`
<div>
<img src="https://ws1.sinaimg.cn/large/93838f95ly1fggker20l4j21hc0xcwfi.jpg" alt="">
</div>
`
}
var society = {
template:`
<div>
<img src="https://ws1.sinaimg.cn/large/93838f95ly1fggkerb681j21hc0xcwfg.jpg" alt="">
</div>
`
}
var recreation = {
template:`
<div>
<img src="https://ws1.sinaimg.cn/large/93838f95ly1fggker6tmaj21hc0xc75b.jpg" alt="">
</div>
`
}
var military = {
template:`
<div>
<img src="https://ws1.sinaimg.cn/large/93838f95ly1fggkeqpmw4j21hc0xcdh1.jpg" alt="">
</div>
`
}
var education = {
template:`
<div>
<img src="https://ws1.sinaimg.cn/large/93838f95ly1fggkeqjmjsj21hc0xct9n.jpg" alt="">
</div>
`
}
var router = new VueRouter({
routes: [
{
path:"/recommend",
component:recommend
},
{
path:"/society",
component:society
},
{
path:"/recreation",
component:recreation
},
{
path:"/military",
component:military
},
{
path:"/education",
component:education
},
{
path:"*",
redirect: "/recommend"
}
]
})
new Vue({
el:"#app",
router:router
})
四、效果展示及在线代码
demo效果展示
五、vue代码步骤总结
- 显示链接
- 配置路由
- 配置组件
- 创建 router 实例
- 挂载路由
- 渲染组件
- 重定向