├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── AboutView.vue
    │   └── HomeView.vue
    ├── main.js
    ├── router.js
    └── stores
    │   └── index.js
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | not ie 11
5 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: '@babel/eslint-parser'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-route-transition
2 | 
3 | 仿微信app的h5页面切换动画
4 | 
5 | 基于vue3 + pinia状态管理
6 | 
7 | 
8 | 
9 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vueapp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.8.3",
12 |     "pinia": "^2.0.22",
13 |     "vue": "^3.2.13",
14 |     "vue-router": "^4.1.5"
15 |   },
16 |   "devDependencies": {
17 |     "@babel/core": "^7.12.16",
18 |     "@babel/eslint-parser": "^7.12.16",
19 |     "@vue/cli-plugin-babel": "~5.0.0",
20 |     "@vue/cli-plugin-eslint": "~5.0.0",
21 |     "@vue/cli-plugin-vuex": "~5.0.0",
22 |     "@vue/cli-service": "~5.0.0",
23 |     "eslint": "^7.32.0",
24 |     "eslint-plugin-vue": "^8.0.3"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YellowDoing/vue-route-transition/2b8adfaabaa124541189cd4605112e454d59852f/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template >
 2 | 
 3 |   <div id="app">
 4 |        <Transition :name="action">
 5 |          <KeepAlive>
 6 |            <component :is="currentView[currentView.length -1]"/>
 7 |          </KeepAlive>
 8 |        </Transition>
 9 |   </div>
10 | 
11 | </template>
12 | 
13 | <script setup>
14 |  import {storeToRefs} from "pinia/dist/pinia";
15 |  import {useRouterStore} from "@/stores";
16 |  import {watchEffect} from "vue";
17 | 
18 | const currentViewStore = useRouterStore();
19 | const {currentView,action} = storeToRefs(currentViewStore)
20 | 
21 |  watchEffect(()=>{
22 |    console.log(action.value)
23 |  })
24 | 
25 | 
26 | </script>
27 | 
28 | <style>
29 | #app {
30 |   font-family: Avenir, Helvetica, Arial, sans-serif;
31 |   -webkit-font-smoothing: antialiased;
32 |   -moz-osx-font-smoothing: grayscale;
33 |   text-align: center;
34 |   color: #2c3e50;
35 |   margin: 0;
36 | }
37 | 
38 | * {
39 |   margin: 0;
40 |   padding: 0;
41 | }
42 | 
43 | .push-enter-active {
44 |   transition: all 0.4s ease;
45 |   z-index: 1;
46 | }
47 | .push-enter-from{
48 |   transform: translateX(100%);
49 | }
50 | 
51 | .push-leave-active{
52 |   transition: all 0.4s;
53 |   z-index: 0;
54 | }
55 | 
56 | .pop-leave-active {
57 |   transform: translateX(100%);
58 |   transition: all 0.4s ease;
59 |   z-index: 1;
60 | }
61 | 
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YellowDoing/vue-route-transition/2b8adfaabaa124541189cd4605112e454d59852f/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/AboutView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1>This is an about page</h1>
 4 |     <button @click="back">返回</button>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup>
 9 | 
10 | import {useRouterStore} from "@/stores";
11 | import {onMounted, onUnmounted} from "vue";
12 | 
13 | 
14 | const store = useRouterStore()
15 | 
16 | onMounted(()=> console.log('AboutView onMounted'))
17 | 
18 | onUnmounted(()=> console.log('AboutView onUnmounted'))
19 | 
20 | 
21 | const back = () => {
22 |   store.$patch(state =>{
23 |     state.currentView.pop()
24 |     state.action = 'pop'
25 |   })
26 | }
27 | </script>
28 | 
29 | <style scoped>
30 | .about {
31 |   background-color: green;
32 |   width: 100%;
33 |   height: 100%;
34 |   position: fixed;
35 | }
36 | </style>


--------------------------------------------------------------------------------
/src/components/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <button @click="nextPage">next page</button>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | 
 9 | import { useRouterStore } from '@/stores'
10 | import {markRaw, onActivated, onMounted, onUnmounted} from "vue";
11 | import AboutView from "../components/AboutView";
12 | 
13 | const store = useRouterStore()
14 | 
15 | const nextPage = ()=>{
16 | 
17 |   store.$patch(state =>{
18 |     state.currentView.push(markRaw(AboutView));
19 |     state.action = 'push'
20 |   })
21 | }
22 | 
23 | onMounted(()=> console.log('HomeView onMounted'))
24 | onUnmounted(()=> console.log('HomeView onUnmounted'))
25 | onActivated(()=> console.log('HomeView onActivated'))
26 | 
27 | </script>
28 | 
29 | <style scoped>
30 | .home {
31 |   background-color: red;
32 |   width: 100%;
33 |   height: 100%;
34 |   position: fixed;
35 | }
36 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import {createPinia} from "pinia/dist/pinia";
 5 | //import stores from './stores'
 6 | 
 7 | 
 8 | const app =  createApp(App)
 9 | app.use(router);
10 | app.use(createPinia())
11 | app.mount("#app");
12 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import {createRouter, createWebHashHistory} from "vue-router";
 2 | import HomeView from "./components/HomeView";
 3 | import About from "./components/AboutView";
 4 | 
 5 |  const router =  createRouter(
 6 |     {
 7 |         history: createWebHashHistory(),
 8 |         routes: [
 9 |             {
10 |                 path: '/',
11 |                 name: 'HomeView',
12 |                 component: HomeView
13 |             },
14 |             {
15 |                 path: '/About',
16 |                 name: 'AboutView',
17 |                 component: About
18 |             },
19 |         ]
20 |     }
21 | )
22 | 
23 | 
24 | export default router;
25 | 


--------------------------------------------------------------------------------
/src/stores/index.js:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | import HomeView from "../components/HomeView";
 3 | import {markRaw} from "vue";
 4 | 
 5 | 
 6 | export const useRouterStore = defineStore('Router', {
 7 |   state: () => {
 8 |     return {
 9 |       currentView : [markRaw(HomeView)],
10 |       action:'push'
11 |     }
12 |   },
13 | 
14 |   actions: {
15 |     push() {
16 |       //this.routeAction = 'slide-fade'
17 |     },
18 |     pop() {
19 |       //this.routeAction = 'slide-fade'
20 |     },
21 |   },
22 | })
23 | 
24 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | const path = require('path');
3 | module.exports = defineConfig({
4 |   transpileDependencies: true,
5 |   outputDir:path.resolve(__dirname,"../www"),
6 |   indexPath:"index.html",
7 |   assetsDir: '',
8 | })
9 | 


--------------------------------------------------------------------------------