Vue+elementUI路由相关

Question

使用vue2+elementUI开发后台管理框架，路由出现问题

想使用动态路由配置一些公用的页面，减少开发量，而且需要页面保持，路由配置和el-menu配置如下

           {
                path: 'commonPage/:pageId',
                name: 'commonPage',
                component: commonPage,
                meta: {
                    title: "公用页面", isCache: true, name: "commonPage"
                }
            },

elementUI菜单配置如下，使用index进行路由跳转

         <el-menu-item index="/commonPage/role_list">
              <template slot="title">
                <i class="my-icon-point icon"></i>
                role_list
              </template>
           </el-menu-item>
           <el-menu-item index="/commonPage/user_manage">
            <template slot="title">
              <i class="my-icon-point icon"></i>
              user_manage
            </template>
          </el-menu-item>

commonPaeg如下

<script>

export default {
  created(){
    this.pageId = this.$route.params.pageId;
  },
  data(){
    return {
      pageId:null
    }
  },
  methods:{

  }
}
</script>

<template>
  <div>
    <h1></h1>pageinfo:{{pageId}}
  </div>
</template>

<style scoped>

</style>

运行起来之点击菜单第一次还会跳转到commonPage页面，并且pageinfo 拿到正确的，切换菜单之后，pageinfo不会刷新，并且我的tabs页签里面也不会增加一个新的页面

想要达成的效果是，点击菜单的时候打开一个新的页签，并且数据刷新

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

你遇到的问题主要在于 Vue Router 和 Element UI 的动态路由配置以及页面缓存机制。在 Vue 中，当你使用动态路由时，页面并不会重新加载，因此当你切换菜单时，页面信息不会刷新。此外，由于 Element UI 的 <el-menu> 组件设计，它不会自动为每个菜单项创建一个新的 tab。你需要手动处理这些逻辑。

对于你的问题，我有以下建议：

1. 动态路由参数刷新：你可以使用 Vue Router 的 $router.go() 方法来实现页面的刷新。在 methods 中添加一个方法来处理路由的刷新，然后在需要的时候调用它。这样即使页面不重新加载，数据也可以得到刷新。

例如：

methods: {
  refreshPage() {
    this.$router.go(0); // 这会刷新当前页面
  }
}

你可以在 <el-menu-item> 的点击事件或者其他的适当位置调用这个 refreshPage 方法。 2. 新开 Tab：Element UI 的 <el-menu> 不会自动为每个菜单项创建一个新的 tab。如果你需要这样的行为，你可以使用自定义指令或者方法来实现。你可以在点击菜单项的时候，判断当前是否已经存在该 tab，如果不存在则创建一个新的 tab。这可能需要结合 Vue Router 的 $router.addTabs 方法来实现。具体实现方式取决于你的具体需求和框架版本。 3. 使用 Vuex 管理状态：如果你的公用页面组件需要共享状态（例如你的 pageId），你可以考虑使用 Vuex 来管理这些状态。这样，无论你在哪个组件中更改状态，所有使用这个状态的组件都会得到通知并更新。这对于管理复杂的路由和组件间通信非常有用。

希望这些建议能帮助你解决问题。如果你还有其他问题或需要进一步的帮助，请随时提问。