Elementui navigation components combined with Vuejs routing

The Elementui navigation component and the Vuejs route combine to achieve click-to-navigate switching routes, navigation based on route positioning

The Nav.vue code, the navigation data is configured in JSON format

<template> <el-menu:d efault-active=\ "$route. Path\" class=\ "el-menu-vertical-demo\" router=true @open =\ "handleopen\" @close =\ "handleclose\" background-color=\ "#545c64 \" text-color=\ "#fff \" Active-t Ext-color=\ "#ffd04b \" V-bind:aa=\ "$route. path\" > <template v-for=\ "item in Menudatas\" > < El-submenu v-if=\ "item.children&&item.children.length>0\" v-bind:key=\ "item.index\" v-bind:index=\ "                   Item.src\ "> <template slot=\" title\ "> <i class=\" el-icon-location\ "></i> <span >{{item.title}}</span> </template> <el-menu-item -group v-if=\ "item.children&&item.children.length>0\" > <el-menu-item v-for=\ "item in Item.children\ "v-bind:key=\" item.index\ "v-bind:index=\" item.src\ "> <span >{{item.title}}& Lt;/span> </el-menu-item> </el-menu-item-group> </el-submenu> <el-menu-item V-else V -bind:key=\ "item.index\" v-bind:index=\ "item.src\" > <i class=\ "el-icon-menu\" ></i> &L T;span >{{item.title}}</span> </el-menu-item> </template> </el-menu> &L T;/template><script>export default {name: \ "Leechgnav\", Data:function () {var menudatas = [{index:\ "1\", type: \ "href\", title: \ "Navigation one \", icon: \ "\", src: \ "/1\", children: [{index:\ "1-2\", type: \ "href\", Title: \ "option one \", icon: \ "\", src: \ "/index\", Children: []}, {index:\ "1-3\", type: \ "href\", Title: \ "option two \", icon: \ "\", src: \ "/lee\", Children: []}, {index:\ "1-4\", type: \ "href\", Title: \ "option three \", icon: \ "\", src: \ "/lee2\", Childre N: []}]}, {index:\ "2\", type: \ "href\", title: \ "Nav two \", icon: \ "\", src: \ "/2\", Children: []}, {index : \ "3\", type: \ "Href\", Title: \ "Navigation three \", icon: \ "\", src: \ "/3\", Children: []}, {index:\ "4\", type: \ "href\", title: \ "Navigation four \", icon: \ "\",    src: \ "/4\", Children: []}];  return {greeting: \ "hello\", Menudatas};  }};</script><style>.leechg_index {background-color:red; Color:white;}. El-row {margin-bottom:20px;}. El-col {border-radius:4px;}. Bg-purple-dark {background: #99a9bf;}. bg-purple {background: #d3dce6;}. bg-purple-light {background: #e5e9f2;}.  grid-content {border-radius:4px; min-height:36px;}.  ROW-BG {padding:10px 0; Background-color: #f9fafc;}  a{Color:white;  Text-decoration:none;  Color:inherit; Text-decoration:inherit;} </style>

　　

Elementui navigation components combined with Vuejs routing