elementUiPuls每次点击侧边导航栏时刷新页面的效果

要实现每次点击侧边导航栏时刷新页面的效果，您可以使用Element UI的Menu组件和Vue Router的导航守卫来实现。

首先，确保您已经安装并使用了Vue Router和Element UI。可以使用以下命令安装Element UI：

npm install element-ui

然后，在您的Vue项目的入口文件（通常是main.js）中，导入Element UI并将其作为Vue应用的插件使用：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

接下来，在您的Vue组件中使用Menu组件来创建侧边导航栏：

<template>
  <div>
    <el-menu :default-active="activeMenu" @select="handleMenuSelect">
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/about">关于</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: ''
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index
      this.$router.push(index)
    }
  }
}
</script>

在上述代码中，我们使用了Menu组件来创建侧边导航栏，并通过`default-active`属性和`@select`事件来处理选中状态和点击事件。在点击侧边导航栏时，通过`$router.push()`方法来触发路由跳转。

最后，在Vue Router的导航守卫中添加刷新页面的逻辑。在您的路由配置文件（通常是router/index.js）中，添加`beforeEach`导航守卫：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  },
  // 其他路由...
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  if (to.path === from.path) {
    location.reload()
  }
  next()
})

export default router

在上述代码中，我们在`beforeEach`导航守卫中判断当前路由的路径是否与上一个路由的路径相同，如果相同，则调用`location.reload()`方法来刷新页面。

这样，每次点击侧边导航栏时，都会刷新页面内容。请注意，在使用`history`模式时，需要在服务器配置中启用对应的URL重写规则。如果您在开发环境中使用Vue CLI进行调试，通常会自动处理这些配置。