vue切换路由后如何清除上一个页面的css，详细说出做法，并且展示代码

好的，下面我来详细介绍一下如何在Vue中清除上一个页面的CSS：

1. 使用Vue的过渡效果（transition）功能

在Vue中，可以使用过渡效果（transition）来实现页面切换的动画效果。在过渡效果中，可以设置在页面切换前后需要添加或删除的CSS类，从而达到清除上一个页面CSS的效果。具体实现步骤如下：

（1）在路由组件的模板（template）中添加过渡效果的代码，例如：

<transition name="fade">
  <router-view></router-view>
</transition>

（2）在路由组件的样式表（style）中定义过渡效果的CSS类，例如：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

（3）在路由组件的JavaScript代码中，设置过渡效果的名称（name）和模式（mode），例如：

export default {
  name: 'MyComponent',
  transition: {
    name: 'fade',
    mode: 'out-in'
  }
}

2. 在路由组件中手动清除上一个页面的CSS

在路由组件的生命周期钩子函数中，可以使用JavaScript代码来手动删除上一个页面的CSS。具体实现步骤如下：

（1）在路由组件的JavaScript代码中，定义一个生命周期钩子函数beforeDestroy，例如：

export default {
  name: 'MyComponent',
  beforeDestroy() {
    // 在此处清除上一个页面的CSS
  }
}

（2）在beforeDestroy函数中，使用JavaScript原生代码或者第三方CSS库来删除上一个页面的CSS。例如，使用原生代码删除所有样式表：

beforeDestroy() {
  const styles = document.querySelectorAll('style');
  for (let i = 0; i < styles.length; i++) {
    styles[i].parentNode.removeChild(styles[i]);
  }
}

或者使用第三方CSS库，例如：reset.css或normalize.css等来清除样式表。

以上就是在Vue中清除上一个页面CSS的两种方法。具体实现方式可以根据实际情况选择。