vue2路由切换时不刷新页面

Vue2中的路由切换如果设置得当，可以实现无刷新（即平滑导航，也称为懒加载）的效果。这通常是通过使用vue-router的`<router-view>`组件配合动态组件和组件缓存技术来完成的：

1. **使用`<keep-alive>`**：这是一个特殊的组件，它会缓存所有在其内部渲染过的组件实例，当下一次访问相同的路径时，这些组件不会被销毁，而是直接复用，从而避免了页面刷新。

<template>
  <div>
    <router-view :key="$route.fullPath" />
    <keep-alive>
      <component :is="viewComponent" />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      viewComponent: null,
    };
  },
  computed: {
    // 根据路由动态选择需要显示的组件
    view() {
      const route = this.$route;
      if (this.viewComponent !== route.name) {
        this.viewComponent = route.name;
      }
      return this.viewComponent;
    },
  },
};
</script>

2. **使用`<router-link>`的`to`属性的`replace`选项**：如果你在模板中直接使用链接，可以设置`replace`为`true`，这样点击时只会改变当前历史记录，而不是添加新的历史记录，从而达到无刷新效果。

<router-link :to="{ path: '/newRoute', replace: true }">Go to new route</router-link>