您好,登錄后才能下訂單哦!
示例 http://47.94.90.89/dist
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項(xiàng)目 使用webpack模板,項(xiàng)目名稱(chēng)(自帶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>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。