1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

const router = new Router({

 routes: [

  {

   path: '/',

   redirect: '/login'

  },

  {

   path: '/login',

   component: Login,

   meta: {

    keepAlive: true

   }

  },

  {

   path: '/login/server',

   component: ServerList,

   meta: {

    keepAlive: true

   }

  },

  {

   path: '/login/server/main',

   component: Main,

   meta: {

    keepAlive: true

   }

  }

 ]

})

1

2

3

4

5

6

7

8

9

10

router.beforeEach((to, from, next) => {

 const toDepth = to.path.split('/').length

 const fromDepth = from.path.split('/').length

 if (toDepth < fromDepth) {

  console.log('後退。。。')

  from.meta.keepAlive = false

  to.meta.keepAlive = true

 }

 next()

})

1

2

3

4

5

6

7

8

<keep-alive>

     <router-view v-if="$route.meta.keepAlive">

      <!-- 這裡是會被快取的檢視元件 -->

     </router-view>

    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive">

     <!-- 這裡是不被快取的檢視元件 -->

    </router-view>