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操做數據

 

原文出處：https://www.cnblogs.com/dnghj/p/12249696.html