用Vue路由配置对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
.tabbar {
width: 100%;
height: 80px;
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.router-link {
width: 120px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: orange;
}
.friends-title {
height: 64px;
background-color: green;
text-align: center;
line-height: 64px;
font-weight: normal;
margin-top: 0;
}
.list-item {
height: 44px;
list-style: none;
padding: 5px;
line-height: 44px;
border-bottom: 1px solid #999;
}
/*选中时候 标签页的样式*/
.selectTabbar {
background-color: red;
}
/*pagein 过渡动画的实现*/
.pagein-enter {
/*二级页面入场动画开始时候的状态*/
left: 100%;
}
.pagein-enter-active,
.pagein-leave-active {
position: absolute;
transition: all 2s;
top: 0;
width: 100%;
overflow: hidden;
}
.pagein-enter-to {
/*二级页面离场动画结束时候的状态*/
left: 0;
}
.pagein-leave {
/*一级页面离场动画开始时候的状态*/
left: 0;
}
.pagein-leave-to {
left: -100%;
}
/*由二级页面回到一级页面的动画 pageout*/
.pageout-enter {
/*一级页面入场动画开始的状态*/
left: -100%;
}
.pageout-enter-active {
position: absolute;
transition: all 2s;
top: 0;
width: 100%;
overflow: hidden;
}
.pageout-enter-to {
/*一级页面入场动画结束的状态*/
left: 0;
}
.pageout-leave {
/*二级页面离场动画开始的状态*/
left: 0;
}
.pageout-leave-active {
position: absolute;
transition: all 2s;
top: 0;
width: 100%;
overflow: hidden;
/* z-index: 10; */
}
.pageout-leave-to {
/*二级页面离场动画结束的状态*/
left: 100%;
}
</style>
</head>
<body>
<div id="app">
<transition :name="animationType">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
<template id="home">
<div class="tabbar">
<router-link to="/index">
<div
class="router-link"
:class="{selectTabbar:selectCom=='/index'}"
>
首页
</div>
</router-link>
<router-link to="/friends">
<div
class="router-link"
:class="{selectTabbar:selectCom=='/friends'}"
>
好友
</div>
</router-link>
<router-link to="/set">
<div class="router-link" :class="{selectTabbar:selectCom=='/set'}">
设置
</div>
</router-link>
</div>
</template>
</div>
<template id="index">
<div>
<h1 class="friends-title">首页</h1>
<p v-for="n in 20">第{{n}}行</p>
</div>
</template>
<template id="friends">
<div>
<h1 class="friends-title">好友</h1>
<ul>
<li class="list-item" v-for="(f,i) in list" :key="i">
<router-link :to='{path:"/friends/" + f.name,query:f}'
>{{f.name}}</router-link
>
</li>
</ul>
</div>
</template>
<template id="chat">
<div>
<h1 class="friends-title">{{name}}</h1>
<button @click="back">返回</button>
<p>与{{name}}聊天中......</p>
</div>
</template>
<template id="set">
<div>
<h1 class="friends-title">设置</h1>
<p v-for="n in 20">第{{n}}行</p>
</div>
</template>
<script>
let home = {
template: "#home",
};
let index = {
template: "#index",
};
let friends = {
template: "#friends",
data() {
return {
list: [
{ id: 1, name: "小明1" },
{ id: 2, name: "小明2" },
{ id: 3, name: "小明3" },
{ id: 4, name: "小明4" },
{ id: 5, name: "小明5" },
{ id: 6, name: "小明6" },
{ id: 7, name: "小明7" },
{ id: 8, name: "小明8" },
{ id: 9, name: "小明9" },
{ id: 10, name: "小明10" },
{ id: 11, name: "小明11" },
{ id: 12, name: "小明12" },
{ id: 13, name: "小明13" },
{ id: 14, name: "小明14" },
{ id: 15, name: "小明15" },
{ id: 16, name: "小明16" },
],
};
},
};
let chat = {
template: "#chat",
methods: {
back() {
this.$router.back();
},
},
computed: {
name: function () {
return this.$route.query.name;
},
},
};
let set = {
template: "#set",
};
let router = new VueRouter({
routes: [
{ path: "/index", component: index },
{ path: "/friends", component: friends },
{ path: "/set", component: set },
{ path: "/friends/:g", component: chat },
{ path: "/", redirect: "/home" },
],
});
let vm = new Vue({
el: "#app",
data: {
animationType: "pagein",
selectCom: "/index",
},
watch: {
$route: function (to, from) {
this.selectCom = to.path;
// console.log(to) //要跳转到的路由地址
// console.log(from) //上一个页面的路由地址
let toLength = to.path.split("/").length; //3
let fromLength = from.path.split("/").length; //2
console.log(toLength, fromLength);
if (toLength > fromLength) {
this.animationType = "pagein";
// 由二级页面进入一级页面
} else if (toLength < fromLength) {
this.animationType = "pageout";
} else {
// 同级跳级
this.animationType = "";
}
},
},
router,
});
</script>
</body>
</html>
效果如下:![]()
浙公网安备 33010602011771号