我这边刚好最近在做项目,实现了楼主想要的类似动效,唯一不足的是当返回的时候和iOS原生应用还是有些差别的,简单来说可以这样做
首先我们假设入口文件是app.vue,那么接下来所有的其他路由,都必须是app.vue的子组件
app.vue可以这么写
项目js入口文件 index.js可以这么定义
import App from './App.vue'
import Index from './Index.vue'
import Detail from './Detail.vue'
const routes = [
{
path: '/', component: App,// (App.vue)
children: [
{ path: '/index', name: 'index', component: Index },
{ path: '/index/detail', name: 'detail', component: Detail },
]
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
此时Index和Detail就是APP.vue的子路由的组件了,接下来我们实现动效,在APP.vue文件里监听$route的变化,做好切换的类
APP.vue
export default {
// ...