vue-router 配置

htmldev/loan/src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <p>111</p>
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive"></router-view>
+    </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive"></router-view>
   </div>
 </template>
 

htmldev/loan/src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
 
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App)
 }).$mount('#app')

htmldev/loan/src/router/index.js

@@ -0,0 +1,80 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/', // 贷款介绍
+    name: 'Home',
+    component: () => import(/* webpackChunkName: "home" */ '../views/home.vue')
+  },
+  {
+    path: '/apply', // 基本信息填写
+    name: 'Apply',
+    component: () => import(/* webpackChunkName: "apply" */ '../views/apply.vue')
+  },
+  {
+    path: '/record', // 我的申请记录
+    name: 'Record',
+    component: () => import(/* webpackChunkName: "record" */ '../views/record.vue'),
+    meta: {
+      isUseCache: false,
+      keepAlive: true
+    }
+  },
+  {
+    path: '/detail', // 进度查询：贷款详情页
+    name: 'Detail',
+    component: () => import(/* webpackChunkName: "detail" */ '../views/detail.vue')
+  },
+  {
+    path: '/attest', // 上传资料
+    name: 'Attest',
+    component: () => import(/* webpackChunkName: "attest" */ '../views/attest.vue')
+  },
+  {
+    path: '/bespeak', // 预约现场办理时间
+    name: 'Bespeak',
+    component: () => import(/* webpackChunkName: "bespeak" */ '../views/bespeak.vue')
+  },
+  {
+    path: '/privacy', // 隐私协议
+    name: 'Privacy',
+    component: () => import(/* webpackChunkName: "privacy" */ '../views/privacy.vue')
+  },
+  {
+    path: '/agreement', // 协议
+    name: 'Agreement',
+    component: () => import(/* webpackChunkName: "agreement" */ '../views/agreement.vue')
+  },
+  {
+    path: '/help', // 还款助手
+    name: 'Help',
+    component: () => import(/* webpackChunkName: "help" */ '../views/help.vue')
+  },
+  {
+    path: '/about', // 了解我们
+    name: 'About',
+    component: () => import(/* webpackChunkName: "about" */ '../views/about.vue')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  routes,
+  scrollBehavior (to, from, savedPosition) {
+    // keep-alive 返回缓存页面后记录浏览位置
+    if (savedPosition && to.meta.keepAlive) {
+      return savedPosition
+    }
+    // 异步滚动操作
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({ x: 0, y: 1 })
+      }, 0)
+    })
+  }
+})
+
+export default router

htmldev/loan/src/views/about.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {
+    name: 'about'
+  }
+</script>
+
+<style scoped>
+
+</style>

htmldev/loan/src/views/agreement.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {
+    name: 'agreement'
+  }
+</script>
+
+<style scoped>
+
+</style>

htmldev/loan/src/views/apply.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {
+    name: 'apply'
+  }
+</script>
+
+<style scoped>
+
+</style>

htmldev/loan/src/views/attest.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {
+    name: 'attest'
+  }
+</script>
+
+<style scoped>
+
+</style>

htmldev/loan/src/views/bespeak.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {
+    name: 'bespeak'
+  }
+</script>
+
+<style scoped>
+
+</style>

htmldev/loan/src/views/detail.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {
+    name: 'detail'
+  }
+</script>
+
+<style scoped>
+
+</style>

htmldev/loan/src/views/help.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {
+    name: 'help'
+  }
+</script>
+
+<style scoped>
+
+</style>

htmldev/loan/src/views/home.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>1111</div>
+</template>
+
+<script>
+  export default {
+    name: 'home'
+  }
+</script>
+
+<style scoped>
+
+</style>

htmldev/loan/src/views/privacy.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {
+    name: 'privacy'
+  }
+</script>
+
+<style scoped>
+
+</style>

htmldev/loan/src/views/record.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {
+    name: 'record'
+  }
+</script>
+
+<style scoped>
+
+</style>