Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
317 views
in Technique[技术] by (71.8m points)

vue中为什么页面被包含<router-view />,keep-alive就会失效

最近在vue的实战中,发现一个问题。子路由的页面中如果存在<router-view />,我在进行页面切换的时候,order.vue页面不会被缓存。当我把order.vue注释掉之后,order.vue中的时间又可以被缓存了。

router.js

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'order',
        name: 'order',
        component: () => import('../views/order.vue'),
        children: [
          {
            path: 'order-time',
            name: 'OrderTime',
            component: () => import('../views/orderTime.vue')
          }
        ]
      },
      {
        path: 'mine',
        name: 'mine',
        component: () => import('../views/mine.vue')
      }
    ]
  }
]

home.vue

  <div class="home">
    <router-link :to="{ name: 'order' }">订单</router-link> |
    <router-link :to="{ name: 'mine' }">我的</router-link>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>

order.vue

<template>
  <div class="order">
    儿子路由:{{ new Date().getTime() }}
    <button @click="back">退出孙子路由</button>
    <button @click="inRouter">进入孙子路由</button>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    back() {
      this.$router.go(-1);
    },
    inRouter() {
      this.$router.push({
        path: "/order/order-time",
      });
    },
  }
};
</script>

mine.vue

<template>
  <div class="mine">
    我的页面
    {{ new Date().getTime() }}
  </div>
</template>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...