├── static
    └── .gitkeep
├── .eslintignore
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── components
    │   ├── F.vue
    │   ├── A.vue
    │   ├── C.vue
    │   ├── E.vue
    │   ├── Dtab1.vue
    │   ├── Dtab2.vue
    │   ├── B.vue
    │   └── D.vue
    ├── App.vue
    └── router
    │   └── index.js
├── .editorconfig
├── .gitignore
├── README.md
├── .babelrc
├── .postcssrc.js
├── index.html
├── .eslintrc.js
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iceuncle/vue-navigation/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-navigation
 2 | 
 3 | > vue前进刷新、后退不刷新的效果。即加载过的界面能缓存起来（返回不用重新加载），关闭的界面能被销毁掉（再进入时重新加载）。例如对a前进到b，b刷新，b后退到a，a不刷新。
 4 | 
 5 | 
 6 | 
 7 | 详细说明见掘金[vue实现前进刷新，后退不刷新](https://juejin.im/post/5a69894a518825733b0f12f2)
 8 | 
 9 | `Demo`包括普通界面切换、`tab`界面切换和不同层级界面的切换示例。
10 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | /* eslint-disable no-new */
10 | new Vue({
11 |   el: '#app',
12 |   router,
13 |   components: { App },
14 |   template: '<App/>'
15 | })
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-navigation</title>
 6 |     <meta name="viewport"
 7 |           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 8 |     <link rel="stylesheet" type="text/css">
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <!-- built files will be auto injected -->
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/components/F.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="back">返回</button>
 4 |     <h1>界面F</h1>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script type="text/ecmascript-6">
 9 |   export default {
10 |     created() {
11 |       this._loadDatas()
12 |     },
13 |     methods: {
14 |       _loadDatas() {
15 |         console.log('加载F...')
16 |       },
17 |       back() {
18 |         this.$router.go(-1)
19 |       }
20 |     }
21 |   }
22 | </script>
23 | 
24 | <style>
25 | 
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/components/A.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>界面A</h1>
 4 |     <button @click="intent">跳转B</button>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script type="text/ecmascript-6">
 9 |   export default {
10 |     created() {
11 |       this._loadDatas()
12 |     },
13 |     methods: {
14 |       _loadDatas() {
15 |         console.log('加载A...')
16 |       },
17 |       intent() {
18 |         this.$router.push('/B_02')
19 |       }
20 |     }
21 |   }
22 | </script>
23 | 
24 | <style>
25 | 
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <keep-alive>
 4 |       <router-view v-if="!$route.meta.noKeepAlive">
 5 |         <!-- 这里是会被缓存的视图组件 -->
 6 |       </router-view>
 7 |     </keep-alive>
 8 | 
 9 |     <router-view v-if="$route.meta.noKeepAlive">
10 |       <!-- 这里是不被缓存的视图组件 -->
11 |     </router-view>
12 |   </div>
13 | </template>
14 | 
15 | <script type="text/ecmascript-6">
16 |   export default {
17 |     created() {
18 | 
19 |     }
20 |   }
21 | </script>
22 | 
23 | <style>
24 |   button {
25 |     background: gray;
26 |     color: white;
27 |     font-size: 20px;
28 |   }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/src/components/C.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="back">返回</button>
 4 |     <h1>界面C</h1>
 5 |     <button @click="intent">跳转D</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script type="text/ecmascript-6">
10 |   export default {
11 |     created() {
12 |       this._loadDatas()
13 |     },
14 |     methods: {
15 |       _loadDatas() {
16 |         console.log('加载C...')
17 |       },
18 |       intent() {
19 |         this.$router.push('/D_04')
20 |       },
21 |       back() {
22 |         this.$router.go(-1)
23 |       }
24 |     }
25 |   }
26 | </script>
27 | 
28 | <style>
29 | 
30 | </style>
31 | 


--------------------------------------------------------------------------------
/src/components/E.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="back">返回</button>
 4 |     <h1>界面E</h1>
 5 |     <button @click="intent">跳转F</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script type="text/ecmascript-6">
10 |   export default {
11 |     created() {
12 |       this._loadDatas()
13 |     },
14 |     methods: {
15 |       _loadDatas() {
16 |         console.log('加载E...')
17 |       },
18 |       intent() {
19 |         this.$router.push('/F_06')
20 |       },
21 |       back() {
22 |         this.$router.go(-1)
23 |       }
24 |     }
25 |   }
26 | </script>
27 | 
28 | <style>
29 | 
30 | </style>
31 | 


--------------------------------------------------------------------------------
/src/components/Dtab1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="back">返回</button>
 4 |     <h1>界面Dtab1</h1>
 5 |     <button @click="intent">跳转E</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script type="text/ecmascript-6">
10 |   export default {
11 |     created() {
12 |       this._loadDatas()
13 |     },
14 |     methods: {
15 |       _loadDatas() {
16 |         console.log('加载D_tab1...')
17 |       },
18 |       intent() {
19 |         this.$router.push('/E_05')
20 |       },
21 |       back() {
22 |         this.$router.go(-1)
23 |       }
24 |     }
25 |   }
26 | </script>
27 | 
28 | <style>
29 | 
30 | </style>
31 | 


--------------------------------------------------------------------------------
/src/components/Dtab2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="back">返回</button>
 4 |     <h1>界面Dtab2</h1>
 5 |     <button @click="intent">跳转F</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script type="text/ecmascript-6">
10 |   export default {
11 |     created() {
12 |       this._loadDatas()
13 |     },
14 |     methods: {
15 |       _loadDatas() {
16 |         console.log('加载D_tab2...')
17 |       },
18 |       intent() {
19 |         this.$router.push('/F_06')
20 |       },
21 |       back() {
22 |         this.$router.go(-1)
23 |       }
24 |     }
25 |   }
26 | </script>
27 | 
28 | <style>
29 | 
30 | </style>
31 | 


--------------------------------------------------------------------------------
/src/components/B.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="back">返回</button>
 4 |     <h1>界面B</h1>
 5 |     <button @click="intent">跳转C</button>
 6 |     <input v-model="data">
 7 |   </div>
 8 | </template>
 9 | 
10 | <script type="text/ecmascript-6">
11 |   export default {
12 |     created() {
13 |       this._loadDatas()
14 |     },
15 |     data() {
16 |       return {
17 |         data: ''
18 |       }
19 |     },
20 |     methods: {
21 |       _loadDatas() {
22 |         console.log('加载B...')
23 |       },
24 |       intent() {
25 |         this.$router.push('/C_03')
26 |       },
27 |       back() {
28 |         this.$router.go(-1)
29 |       }
30 |     }
31 |   }
32 | </script>
33 | 
34 | <style>
35 | 
36 | </style>
37 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parserOptions: {
 6 |     parser: 'babel-eslint'
 7 |   },
 8 |   env: {
 9 |     browser: true,
10 |   },
11 |   extends: [
12 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
13 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
14 |     'plugin:vue/essential',
15 |     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
16 |     'standard'
17 |   ],
18 |   // required to lint *.vue files
19 |   plugins: [
20 |     'vue'
21 |   ],
22 |   // add your custom rules here
23 |   rules: {
24 |     // allow async-await
25 |     'generator-star-spacing': 'off',
26 |     // allow debugger during development
27 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
28 |     'eol-last': 0,
29 |     'space-before-function-paren': 0,
30 |     'no-multiple-empty-lines': 0,
31 |     'no-trailing-spaces': 0,
32 |     'indent': 0
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/D.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="tab">
 4 |       <div class="tab-item" @click="intent(1)">tab1</div>
 5 |       <div class="tab-item" @click="intent(2)">tab2</div>
 6 |     </div>
 7 | 
 8 |     <keep-alive>
 9 |       <router-view></router-view>
10 |     </keep-alive>
11 | 
12 |   </div>
13 | </template>
14 | 
15 | <script type="text/ecmascript-6">
16 |   export default {
17 |     created() {
18 | 
19 |     },
20 |     data () {
21 |       return {
22 | //        试了半天，发现有路由界面时在beforeEach全局中还是不好配置，只能这样处理了
23 |         needDestory: false
24 |       }
25 |     },
26 |     methods: {
27 |       intent(index) {
28 |         if (index === 1) {
29 |           this.$router.replace('/Dtab1_04')
30 |         } else {
31 |           this.$router.replace('/Dtab2_04')
32 |         }
33 |       },
34 |       back() {
35 |         this.$router.go(-1)
36 |       }
37 |     },
38 |     beforeRouteLeave (to, from, next) {
39 |       if (to.path === '/C_03') {
40 |         this.needDestory = true
41 |       }
42 |       next()
43 |     },
44 |     deactivated() {
45 |       console.log(this.needDestory)
46 |       if (this.needDestory) {
47 |         this.$destroy()
48 |       }
49 |     }
50 |   }
51 | </script>
52 | 
53 | <style>
54 |   .tab {
55 |     width: 100%;
56 |     height: 40px;
57 |     border-bottom: solid 1px deepskyblue;
58 |     display: flex;
59 |     display: -webkit-flex;
60 |   }
61 | 
62 |   .tab-item {
63 |     width: 100%;
64 |     display: flex;
65 |     display: -webkit-flex;
66 |     justify-content: center;
67 |     align-items: center;
68 |     font-size: 20px;
69 |     font-weight: bold;
70 |   }
71 | 
72 | 
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | const A = () => import('components/A')
 7 | const B = () => import('components/B')
 8 | const C = () => import('components/C')
 9 | const D = () => import('components/D')
10 | const DTab1 = () => import('components/Dtab1')
11 | const DTab2 = () => import('components/Dtab2')
12 | const E = () => import('components/E')
13 | const F = () => import('components/F')
14 | 
15 | const router = new Router({
16 |   routes: [
17 |     {
18 |       path: '/',
19 |       redirect: '/A_01'
20 |     },
21 |     {
22 |       path: '/A_01',
23 |       component: A
24 |     },
25 |     {
26 |       path: '/B_02',
27 |       component: B
28 |     },
29 |     {
30 |       path: '/C_03',
31 |       component: C
32 |     },
33 |     {
34 |       path: '/D_04',
35 |       component: D,
36 |       children: [
37 |         {
38 |           path: '/',
39 |           redirect: '/Dtab1_04'
40 |         },
41 |         {
42 |           path: '/Dtab1_04',
43 |           component: DTab1
44 |         },
45 |         {
46 |           path: '/Dtab2_04',
47 |           component: DTab2
48 |         }
49 |       ]
50 |     },
51 |     {
52 |       path: '/E_05',
53 |       component: E
54 |     },
55 |     {
56 |       path: '/F_06',
57 |       component: F
58 |     }
59 |   ]
60 | })
61 | 
62 | router.beforeEach((to, from, next) => {
63 |   const toDepth = to.path.substring(to.path.length - 2, to.path.length)
64 |   const fromDepth = from.path.substring(from.path.length - 2, from.path.length)
65 |   if (from.path !== '/' && toDepth < fromDepth) {
66 |     // 有tab界面时需要添加此判断 from的KeepAlive不需要置为false
67 |     if (from.path !== '/Dtab1_04' && from.path !== '/Dtab2_04') {
68 |       from.meta.noKeepAlive = true
69 |     }
70 |     to.meta.noKeepAlive = false
71 |   }
72 |   next()
73 | })
74 | 
75 | export default router
76 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-navigation",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "wutianyang <wutianyang@hd123.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "lint": "eslint --ext .js,.vue src",
11 |     "build": "node build/build.js"
12 |   },
13 |   "dependencies": {
14 |     "vue": "^2.5.2",
15 |     "vue-router": "^3.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^7.1.2",
19 |     "babel-core": "^6.22.1",
20 |     "babel-eslint": "^8.2.1",
21 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
22 |     "babel-loader": "^7.1.1",
23 |     "babel-plugin-syntax-jsx": "^6.18.0",
24 |     "babel-plugin-transform-runtime": "^6.22.0",
25 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
26 |     "babel-preset-env": "^1.3.2",
27 |     "babel-preset-stage-2": "^6.22.0",
28 |     "chalk": "^2.0.1",
29 |     "copy-webpack-plugin": "^4.0.1",
30 |     "css-loader": "^0.28.0",
31 |     "eslint": "^4.15.0",
32 |     "eslint-config-standard": "^10.2.1",
33 |     "eslint-friendly-formatter": "^3.0.0",
34 |     "eslint-loader": "^1.7.1",
35 |     "eslint-plugin-import": "^2.7.0",
36 |     "eslint-plugin-node": "^5.2.0",
37 |     "eslint-plugin-promise": "^3.4.0",
38 |     "eslint-plugin-standard": "^3.0.1",
39 |     "eslint-plugin-vue": "^4.0.0",
40 |     "extract-text-webpack-plugin": "^3.0.0",
41 |     "file-loader": "^1.1.4",
42 |     "friendly-errors-webpack-plugin": "^1.6.1",
43 |     "html-webpack-plugin": "^2.30.1",
44 |     "node-notifier": "^5.1.2",
45 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
46 |     "ora": "^1.2.0",
47 |     "portfinder": "^1.0.13",
48 |     "postcss-import": "^11.0.0",
49 |     "postcss-loader": "^2.0.8",
50 |     "postcss-url": "^7.2.1",
51 |     "rimraf": "^2.6.0",
52 |     "semver": "^5.3.0",
53 |     "shelljs": "^0.7.6",
54 |     "uglifyjs-webpack-plugin": "^1.1.1",
55 |     "url-loader": "^0.5.8",
56 |     "vue-loader": "^13.3.0",
57 |     "vue-style-loader": "^3.0.1",
58 |     "vue-template-compiler": "^2.5.2",
59 |     "webpack": "^3.6.0",
60 |     "webpack-bundle-analyzer": "^2.9.0",
61 |     "webpack-dev-server": "^2.9.1",
62 |     "webpack-merge": "^4.1.0"
63 |   },
64 |   "engines": {
65 |     "node": ">= 6.0.0",
66 |     "npm": ">= 3.0.0"
67 |   },
68 |   "browserslist": [
69 |     "> 1%",
70 |     "last 2 versions",
71 |     "not ie <= 8"
72 |   ]
73 | }
74 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     // Use Eslint Loader?
24 |     // If true, your code will be linted during bundling and
25 |     // linting errors and warnings will be shown in the console.
26 |     useEslint: true,
27 |     // If true, eslint errors and warnings will also be shown in the error overlay
28 |     // in the browser.
29 |     showEslintErrorsInOverlay: false,
30 | 
31 |     /**
32 |      * Source Maps
33 |      */
34 | 
35 |     // https://webpack.js.org/configuration/devtool/#development
36 |     devtool: 'cheap-module-eval-source-map',
37 | 
38 |     // If you have problems debugging vue-files in devtools,
39 |     // set this to false - it *may* help
40 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
41 |     cacheBusting: true,
42 | 
43 |     cssSourceMap: true
44 |   },
45 | 
46 |   build: {
47 |     // Template for index.html
48 |     index: path.resolve(__dirname, '../dist/index.html'),
49 | 
50 |     // Paths
51 |     assetsRoot: path.resolve(__dirname, '../dist'),
52 |     assetsSubDirectory: 'static',
53 |     assetsPublicPath: '/',
54 | 
55 |     /**
56 |      * Source Maps
57 |      */
58 | 
59 |     productionSourceMap: true,
60 |     // https://webpack.js.org/configuration/devtool/#production
61 |     devtool: '#source-map',
62 | 
63 |     // Gzip off by default as many popular static hosts such as
64 |     // Surge or Netlify already gzip all static assets for you.
65 |     // Before setting to `true`, make sure to:
66 |     // npm install --save-dev compression-webpack-plugin
67 |     productionGzip: false,
68 |     productionGzipExtensions: ['js', 'css'],
69 | 
70 |     // Run the build command with an extra argument to
71 |     // View the bundle analyzer report after build finishes:
72 |     // `npm run build --report`
73 |     // Set to `true` or `false` to always turn it on or off
74 |     bundleAnalyzerReport: process.env.npm_config_report
75 |   }
76 | }
77 | 


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