vue-router（一）

<router-link class="li" :to="{name:‘one‘,params:{id:‘0‘}}" tag="div">One</router-link>
<router-link class="li" :to="{path:‘/two‘,query:{id:‘1‘}}" tag="div">Two</router-link>
<router-link class="li" :to="{path:‘/three‘,query:{id:‘2‘}}" tag="div">Three</router-link>

<template>
<div id="app">
<transition :name="animate">
<router-view id="view"></router-view>
</transition>
</div>
</template>
 
<script>
export default {
name: ‘App‘,
data () {
return {
animate: "",
}
},
watch: {
//to为下个页面，from为源路由。通过再路由的配置中将页面的入栈方式设置为1.再页面出栈的时候设置为2
$route: function(to,from) {
/*
0: 不做动画
1: 左切换
2: 右切换
3: 上切换
4: 下切换
*/
let animate = this.$router.animate || to.meta.slide;
if(!animate) {
this.animate = ""
} else {
this.animate =
animate === 1? "slide-left":
animate === 2? "slide-right":
animate === 3? "slide-top":
animate === 4? "slide-bottom":""
}
//当animate为1的时候页面想左滑动，2为右，3为上，4为下，0没有动画，
this.$router.animate = 0;//恢复状态
// console.log(this.animate);
}
}
}
</script>
 
<style>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
font-size: 26.67vw;
}
.wraper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #ffff;
}
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
width: 100%;
height: 100%;
}
//不同动画的c3样式
#view {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
transform: translate(-100%, 0);
}
.slide-top-enter,
.slide-bottom-leave-active {
opacity: 0;
transform: translate(0, 100%);
}
.slide-top-leave-active,
.slide-bottom-enter {
opacity: 0;
transform: translate(0, -100%);
}
</style>

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
 
// 全局路由返回，再页面返回上级页面时，可以通过调用back方法返回上级页面
Vue.prototype.back = (route) =>{
route.animate = 2;//设置路由返回页面的动画方式
window.history.go(-1);//返回一级页面
}
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
router,
components: { App },
template: ‘<App/>‘
})

import Vue from ‘vue‘
import Router from ‘vue-router‘
// import HelloWorld from ‘@/components/HelloWorld‘
import Home from "@/views/home/index"
import One from "@/views/one/index"
import Two from "@/views/two/index"
import Three from "@/views/three/index"
Vue.use(Router);
Router.prototype.animate = 0;//给所有的路由设置动画初始化为0，无动画效果
//通过给不同的路由设置不同的slide来实现页面不同入栈方式为1,2,3,4
export default new Router({
routes: [
{
path: ‘/‘,
name: ‘/‘,
component: Home
},
{
path: "/one",
name: "one",
meta: {
slide: 1,
},
component: One,
},
{
path: "/two",
name: "two",
meta: {
slide: 1,
},
component: Two
},
{
path: "/three",
name: "three",
meta: {
slide: 1,
},
component: Three
}
]
})

<template>
<div class="wraper">
<div class="container">
<div class="back" @click="back($router)">Back（返回上一级页面）</div>
<h3>这里One页面</h3>
<h3>首页传过来{{msg}}</h3>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: ""
}
},
methods: {
getParams() {
this.msg = this.$route.params.id;
}
},
mounted() {
this.getParams();
},
watch: {
‘$route‘: ‘getParams‘
}
}
</script>
<style scoped>
* {
font-size: 16px;
}
.back {
height: .5rem;
line-height: .5rem;
border-bottom: 1px solid #ccc;
background-color: #999;
color: #fff;
}
.back:hover {
background-color: #999;
}
</style>

<template>
<div class="wraper">
<div class="container">
<h3>这里是Two页面</h3>
<h3>首页传过来{{msg}}</h3>
<div class="back" @click="back($router)">Back（返回上一级页面）</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: ""
}
},
methods: {
getParams() {
this.msg = this.$route.query.id;
}
},
mounted() {
this.getParams();
},
watch: {
‘$route‘: ‘getParams‘
}
}
</script>
<style scoped>
* {
font-size: 16px;
}
.back {
width: 100%;
height: .5rem;
line-height: .5rem;
background-color: #ccc;
border-bottom: 1px solid #ccc;
}
</style>

<template>
<div class="wraper">
<div class="container">
<h3>这里是Two页面</h3>
<h3>首页传过来{{msg}}</h3>
<div class="back" @click="back($router)">Back（返回上一级页面）</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: ""
}
},
methods: {
getParams() {
this.msg = this.$route.query.id;
}
},
mounted() {
this.getParams();
},
watch: {
‘$route‘: ‘getParams‘
}
}
</script>
<style scoped>
* {
font-size: 16px;
}
.back {
width: 100%;
height: .5rem;
line-height: .5rem;
background-color: #ccc;
border-bottom: 1px solid #ccc;
}
</style>