vue动态路由加载的思路

迷南。 2022-09-16 12:20 111阅读 0赞

vue动态路由加载的思路：  
前端把页面的路由路径给后台，路径前面尽量带 "@/"比较好，让后台根据不同的角色权限，返回给前端指定的动态路由列表，请求到路由列表后，使用 “addRoutes” 添加到路由里去。title表示中文，path表示跳转的路由，这样路由菜单就有了

#### 案例： ####

#### home.vue ####

<template>
      <div>
        <button @click="onlogin">登录按钮</button>
      </div>
    </template>
    
    <script>
    
    export default { 
      methods: { 
        onlogin() { 
        // 动态路由：asyncRoutes 模拟从后台请求到的动态数据路由列表
        let asyncRoutes = [
    		 { 
    		    path: '/',
    		    name: 'Home',
    		    component: () => import('@/views/Home.vue'),
    	        meta: { 
    		      title: "首页"
    		    },
    		  },
    		  { 
    		    path: '/dashboard',
    		    name: 'dashboard',
    		    component: () => import('@/views/Dashboard.vue')
    	        meta: { 
    		      title: "仪表盘页"
    		    },
    		  }
    	]
    
          var timer = setTimeout(() => { 
            this.$router.addRoutes(asyncRoutes);// 把动态路由列表使用 “addRoutes” 添加进去
            clearTimeout(timer);
            timer = null;
          }, 1000);
        },
      },
    };
    </script>

#### 动态路由: router/index.js ####

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    // 普通路由
    export const constantRouts = [
      { 
        path: '/login',
        name: 'login',
        component: () => import('@/views/Login.vue'),
        meta: { 
       		title: "登录页"
     	},
      },
      { 
        path: '/register',
        name: 'register',
        component: () => import('@/views/Register.vue'),
        meta: { 
       		title: "注册页"
     	},
      },
    ]
    
    const router = new VueRouter({ 
      routes: constantRouts
    })
    export default router