vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作

1. Vue 路由缓存

Vue 路由缓存可以让我们实现页面跳转之后保留原来页面的滚动位置、输入内容等状态。在 Vue 中，仅需在路由配置中加入 keep-alive 属性即可。示例如下：

<template>
  <div>
    <router-view v-if="$route.meta.keepAlive"></router-view> <!-- 需要缓存的页面 -->
  </div>
</template>

<script>
export default {
  name: 'CachePage',
  data() {
    return {};
  },
  metaInfo() {
    return {
      title: '缓存页面',
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (to.meta.keepAlive) {
        vm.$nextTick(() => {
          const scroller = document.querySelector('.wrapper'); // 页面滚动元素的选择器
          scroller.scrollTop = vm.$store.state.top || 0; // 通过 store 取出滚动位置
        });
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    if (to.meta.keepAlive) {
      const scrollTop = document.querySelector('.wrapper').scrollTop; // 获取滚动位置
      this.$store.commit('setTop', scrollTop); // 通过 store 保存滚动位置
    }
    next();
  },
};
</script>

1. Vue 路由嵌套

Vue 路由嵌套可以在保持页面整体结构的情况下将页面模块化，方便管理和维护。在 Vue 的路由配置中，用 children 属性来实现路由嵌套。示例如下：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'article/:id',
          component: Article,
        },
      ],
    },
  ],
});

1. Vue 路由守卫

Vue 路由守卫可以在进行路由跳转、路由参数变化等操作前，进行拦截、验证、重定向等操作。Vue 路由守卫分为全局守卫、组件内守卫、异步路由组件守卫等多种类型。示例如下：

全局前置守卫：

const router = new VueRouter({
  routes: [...],
});

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

组件内路由独享守卫：

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // ...
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // ...
    next();
  },
  beforeRouteLeave(to, from, next) {
    // ...
    next();
  },
};

异步路由组件守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: () => import('./components/Home.vue'),
      beforeEnter: (to, from, next) => {
        // ...
        next();
      },
    },
  ],
});

1. 监听物理返回操作

监听物理返回操作可以在用户点击返回按钮时，进行自定义操作，比如提示用户再次确认、跳转到指定页面等。在 Vue 中，我们可以通过 window.history 对象来监听物理返回操作。示例如下：

const router = new VueRouter({
  routes: [...],
});

router.afterEach(() => {
  // 记录页面历史
  window.history.pushState(null, null, location.href);
});

window.addEventListener('popstate', (event) => {
  if (event.state === null && router.currentRoute.path !== '/home') {
    // 用户点击返回按钮且当前页面不是首页，则跳转到首页
    router.push('/');
  }
});

以上是关于 Vue 路由缓存、路由嵌套、路由守卫、监听物理返回操作的完整攻略。其中路由缓存和路由嵌套都有示例说明，希望能对你有所帮助。