Vue+elementUI 自定義動態數據菜單導航組件實現展開收縮+路由跳轉router-view渲染數據 路由跳轉到同一個頁面帶參數ID 自動刷新數據

准備:導入ElementUI 看官網教程

數據准備:JSON數據轉換成樹狀

參考文章: JS實現 JSON扁平數據轉換樹狀數據

后台我拿的數據是這樣的格式:

[
{id:1 , parentId: 0, name: '', level: 0},
{id:2 , parentId: 0, name: '', level: 0},
{id:3 , parentId: 2, name: '', level: 1},
{id:4 , parentId: 2, name: '', level: 1},
{id:5 , parentId: 4, name: '', level: 2},
]

 

 

 轉換后的數據差不多就是這樣的格式

{
    [
        {
            id: 1,
            name: ''
        },
        {
            id: 2,
            name: '',
            children: [
                {
                    id: 3
                },
                {
                    id: 4,
                    children: [
                        {
                            id: 5
                        }
                    ]
                }
            ]
        },
    ]
}

 

 

自定義組件 路徑 componebts/NavMenu.vue

 

<template>
  <fragment class="navMenu">
    <template v-for="navMenu in navMenus">
      <!-- 最后一級菜單 -->
      <el-menu-item v-if="!navMenu.children" :key="navMenu.menuId" :data="navMenu" :index="navMenu.menuUrl+'/'+navMenu.menuId">//帶參數ID
        <i :class="navMenu.menuIcon"></i>
        <span slot="title" >{{navMenu.menuName}}</span>
      </el-menu-item>
      <!-- 此菜單下還有子菜單 -->
      <el-submenu v-if="navMenu.children"
                  :key="navMenu.menuId" :data="navMenu" :index="navMenu.menuId">//navMenu.menuId解決跳轉相同路由頁面 展開菜單問題
        <template slot="title">
          <i :class="navMenu.menuIcon"></i>
          <span slot="title"> {{navMenu.menuName}}</span>
        </template>
        <!-- 遞歸 -->
        <NavMenu :navMenus="navMenu.children"></NavMenu>
      </el-submenu>
    </template>

  </fragment>
</template>

<script>
  export default {
    name: 'NavMenu',
    props: ['navMenus'],
    data() {
      return {}
    },
    methods: {}
  }
</script>

<style>
</style>

自定義組件包含在 fragment 不是div 不然展開和縮人會出現顯示問題
如下:

解決菜單導航折疊后文字不隱藏

出現這個問題是因為我們在<el-menu>嵌套中出現了意料之外的<div>,而<el-menu>標簽本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>其中之一
但是我們又不能直接刪掉<div>,因為<template>中包含的必須是一個根標簽，而v-for會形成不確定的並列標簽

項目安裝vue-fragment
cnpm install --save vue-fragment

在main.js中引入
// main.js
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)

<div>修改為<fragment>即可

:index="" 指的是路由跳轉的地址

 

路徑 在你需要的頁面引入組件  嵌套在div里面可以避免不必要的錯誤

<template>
  <div >     
  <el-menu  default-active="this.$router.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                  mode="vertical"
                  background-color="#2c2e2f"
                  text-color="#bfcbd9"
                  active-text-color="#85c1e7"
                  :default-active="activeIndex"
                  router>
          <NavMenu :navMenus="sret"></NavMenu>
        </el-menu>

<router-view :key="$route.path + $route.query.t"></router-view>

:key="$route.path + $route.query.t" //解決跳轉到相同路由頁面 數據不刷新問題

</div> </template>

<script type="text/ecmascript-6">
  import NavMenu from "@/components/NavMenu" //組件位置
export default {
  components: { //定義組件
    NavMenu,
  },
  name: 'login',
  data() {
    return {}
　　}
}

:navMenus="sret" 這里的sret是后台拿過來的JSON樹狀數據 數據要轉換成樹狀的 不然不行  吧轉換后的數據賦值sret


讓路由在<router-view></router-view>打開

定義路由和跳轉的頁面

路徑 router/index.js 里面

需要幾個頁面就按這樣的跳轉 都要引入
import Ibookmark from '@/views/bookmark';
..........

// 啟用路由
Vue.use(Router);

// 導出路由 
export default new Router({

routes: [{
  path: '/login',
 name: '',
 component: login,
 children: [ 

　　　　{
  path: '/bookmark/:menuId',
 component: resolve => require(['../views/bookmark.vue'], resolve),
 query:{
 t:Date.now(), //解決跳轉到相同路由頁面 數據不刷新問題
 },
 
},

 ],
},........省略

父子路由 是層級關系 children: []

 

 

 

 

 

 

 

 

 

:index="navMenu.menuUrl+'/'+navMenu.menuId" 

注意看 路徑 我這里傳了ID參數 是為了在路由里面顯示不同的數據

然后在路由的頁面 獲取點擊的菜單id 渲染不同的數據

this.$route.params this.$route.query 多種取值的方式我都試了 沒成功在頁面取出id

然后我用的是URL的截取/后面的ID方法

aaa() {
  var _this=this
 var url = window.location.href;
 var index = url.lastIndexOf("\/");
 _this.menuId = url.substring(index + 1,url.length);
},

獲取到最后一個斜杠后面的數據 賦值給menuId 

實現 菜單跳轉到相同的路由 根據ID渲染不同的數據 如果不設置:key="$route.path + $route.query.t" 會出現數據ID不刷新問題 
設置后 每次跳轉 都會出現讀取id 然后操作ID操作數據