name: 'App',
data() {
return {
transitionName: 'slideleft'
}
},
watch: {
$route() { // 监听路由变化重新赋值
if (this.$router.isleft) {
this.transitionName = 'slideleft'
}
if (this.$router.isright) {
this.transitionName = 'slideright'
}
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.Router {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.slideleft-enter,
.slideright-leave-active {
opacity: 0;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.slideleft-leave-active,
.slideright-enter {
opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
</style>
在组件中使用的话则使用
this.$router.goBack() // 返回
this.$router.to('****') // 进入到详情还有一步，就是监听点击浏览器返回按钮，在main.js里写如下代码
window.addEventListener('popstate', function(e) {
router.togoback() // router已经在上面import进来
}, false)移动端UI框架选择
作为移动端项目，上面步骤其实已经算完善了，但是往往会遇到项目工期紧，或者缺少人手的时候，这个时候引入一个移动端的UI就如虎添翼了，不用自己去封装一些ui组件了，这里使用mint-ui，优点可自行搜索，这里讲一下对mint-ui的引入。
（1）安装mint-ui
npm install mint-ui --save（2）引入mint-ui
在main.js里引入mint-ui
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css' // 引入css
Vue.use(Mint) // 全局使用这样就可以在整个vue项目里面使用mint-ui的组件了。
打包
打包遇到的一些问题
（1）打包之后在ios上点击元素会闪出来一个半透明的灰色框，这里需要加一句css做下兼容-webkit-tap-highlight-color:rgba(0,0,0,0); 放入#app的css里
（2）点击事件右300ms的延迟，可采用fastclick.js解决，参考以下代码
npm install fastclick --save// 在main.js引入
import FastClick from 'fastclick'
FastClick.attach(document.body)
打包注意事项
如果将项目打包用于移动端浏览器，则直接打包，不需要更改其它的东西，在包之后上传至服务器，使用nginx做下接口转发即可
