vue路由组件左右切换(×××返回键或自写按钮)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue路由组件左右切换(×××返回键或自写按钮)相关的知识,希望对你有一定的参考价值。
1 安装vue-cli(1) 下载安装node.js
(1) npm install -g cnpm --registry=https://registry.npm.taobao.org 换源
(1) cnpm install -g vue-cli 全局安装vue-cli 已安装则不用
(1) vue init webpack Vue-Project 初始化vue项目 使用webpack模板,项目名称(自带webpack)
(1) cnpm install 初始化 生成node_modules
(1) npm run dev
需要上线打包为 npm run build
2 配置路由 (router 目录>index.js)
import ccc from ‘@/components/ccc‘
Router.prototype.go = function (a) {
sessionStorage.isBack = true
if(a){
window.history.go(a)
}else{
window.history.go(-1)
}
}
window.addEventListener("popstate", function(e) {
sessionStorage.isBack = true
}, false);
Vue.use(Router)
3 app.vue中
(1)```
<transition :name="transitionName" >
<router-view class="child-view" ></router-view>
</transition>
</div>
(2)<script>
export default {
name: ‘App‘,
data () {
return {
transitionName:‘slide-left‘
}
},
watch: {
‘$route‘ (to, from) {
let isBack = eval(sessionStorage.isBack)
if (isBack) {
this.transitionName = ‘slide-right‘
} else {
this.transitionName = ‘ slide-left‘
}
console.log(sessionStorage.isBack);
sessionStorage.isBack = false
}
},
}
</script>
<style>
*{
margin: 0 ;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
text-align: center;
max-width: 750px;
margin: 0 auto;
overflow-x: hidden;
position: relative;
}
.child-view {
transition:all .3s ease;
position: absolute;
width: 100%;
}
.slide-left-enter,.slide-right-leave-active {
opacity:0;
-webkit-transform:translate(100%,0);
transform:translate(100%,0);
}
.slide-left-leave-active,.slide-right-enter {
opacity:0;
-webkit-transform:translate(-100%,0);
transform:translate(-100%,0);
}
</style>
以上是关于vue路由组件左右切换(×××返回键或自写按钮)的主要内容,如果未能解决你的问题,请参考以下文章