Background management permissions

use vue + element-ui to build a background project (scaffolding). Now you need to manage permissions in the background. As I have no experience, I would like to ask you for advice, such as how to dynamically generate routes when some pages are not displayed and some buttons cannot be clicked.

this is the path to the route index.js

import Vue from "vue"
import Router from" vue-router"
import login from"@ / components/login"
import home from"@ / components/home/home"
/ / Commodity Management-> Group Management
import groupingMent from"@ / components/manageMent/groupingMent"
import productList from"@ / components/manageMent/productList"
import brandMent from"@ / components/manageMent/brandMent"
import brandMentli from"@ / components/manageMent/brandMentli"
import categoryGoods from"@ / components/manageMent/categoryGoods"
import groupedTags from"@ / components/manageMent/ GroupedTags"
import groupCommodity from"@ / components/manageMent/groupCommodity"
import setAttribute from"@ / components/manageMent/setAttribute"
import catalogueList from"@ / components/manageMent/catalogueList"
import editBranddata from"@ / components/manageMent/editBranddata"
import twoReclassify from"@ / components/manageMent/twoReclassify"
import editorProperty from"@ / components/manageMent/editorProperty"
import propertCreate from"@ / components/manageMent/propertCreate"
import addGroupedshop from"@ / components/manageMent/addGroupedshop"
/ / Commodity Management-> Commodity list
import saleGoods from"@ / components/ ManageMent/productList/saleGoods"
import tradeChandise from"@ / components/manageMent/productList/tradeChandise"
import redactGoods from"@ / components/manageMent/productList/redactGoods"
import materialList from"@ / components/manageMent/productList/materialList"
import addMerchandise from"@ / components/manageMent/productList/addMerchandise"
Vue.use (Router)

export default new Router ({
routes: [{

  path: "/login",
  name: "/login",
  component: login
},
{
  path: "/home",
  name: "/home",
  component: home
},
// ->
{
  path: "/groupingMent",
  name: "/groupingMent",
  component: groupingMent
},
{
  path: "/productList",
  name: "/productList",
  component: productList
},
{
  path: "/brandMent",
  name: "/brandMent",
  component: brandMent
},
{
  path: "/brandMentli",
  name: "/brandMentli",
  component: brandMentli
},
{
  path: "/categoryGoods",
  name: "/categoryGoods",
  component: categoryGoods
},
{
  path: "/groupedTags",
  name: "/groupedTags",
  component: groupedTags
},
{
  path: "/groupCommodity",
  name: "/groupCommodity",
  component: groupCommodity
},
{
  path: "/setAttribute",
  name: "/setAttribute",
  component: setAttribute
},
{
  path: "/catalogueList",
  name: "/catalogueList",
  component: catalogueList
},

this is main.js "s
import Vue from "vue"
import App from". / App"
import router from". / router"
import ElementUI from "element-ui"
import" element-ui/lib/theme-chalk/index.css"
import axios from "axios"
import store from". / store"

import". / assets/Ueditor/ueditor.config.js"
import". / assets/Ueditor/ueditor.all.min.js"
import". / assets/Ueditor/lang/zh-cn/zh-cn.js"
import". / assets/Ueditor/ueditor.parse.min.js"

import moment from "moment"

Vue.use (ElementUI)

Vue.config.productionTip = false
Vue.prototype.axios = axios

/ eslint-disable no-new /
new Vue ({
el:"- sharpapp",
router,
store,
components: {

App

},
template:"< App/ >"
})