【vue 之后台返回动态路由】

最新推荐文章于 2024-07-09 21:18:14 发布

假装的妆

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量1.7k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41796860/article/details/126655386

版权

vu中的路由很简单，官网上也没太多介绍，草草带过，这里介绍后台返回的动态路由。

定义router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

import Layout from './views/admin/index.vue'
// 静态路由,这里写好一些不需要从后台获取的路由,如首页,404页面
const constantRouterMap = [
	{
		path: "*",
		redirect: "/Login"
	},
	{
		path: "/Login",
		name:'login',
		component: () =>import("./views/Login.vue")
	}
]
export const navRoutes = []
export default new Router({
routes: constantRouterMap.concat(navRoutes)
})

路由守卫里获取动态路由，并追加

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "@/store/index.js";
import NProgress from "nprogress";
import { Message } from "common/utils";

if(window.__config.token && window.__config.userId){
	sessionStorage.setItem("token", window.__config.token);
	sessionStorage.setItem("userId", window.__config.userId);
	store.state.RoleId=1
	store.state.admin.userName = 'admin'
	sessionStorage.userName = 'admin'
}
NProgress.configure({ showSpinner: false }) // NProgress Configuration

let getRouter = null
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem("token")
  if(!token && to.path != '/Login'){ 
    next({path: '/Login'})
  }else{
    if (!!token) {//有token
      if(!getRouter){
        //拿到路由,假装getRouter是从后台拿回来的
        getRouter = [{
          path: "/admin",
          component: () => import(/* webpackChunkName: "admin" */ "./views/admin/index.vue"),
          meta: {
            keepAlive:false
          },
          children: [
            {
              path: "/admin/main2",
              name:'主页-新',
              component: () =>import(/* webpackChunkName: "admin" */ "./views/admin/main3.vue"),
              meta: {
                keepAlive:false
              }
            },
          ]
        }] 
        router.addRoutes(getRouter) //动态添加路由
        // router.navRoutes = getRouter
        console.log(router)
        // global.antRouter = getRouter //将路由数据传递给全局变量，做侧边栏菜单渲染工作
        next({ ...to, replace: true })
      }else{
        next()
      }
    } else {
      //没有token
      if(to.path == '/Login'){
        next()
      }else{
        next({path:'/Login'})
      }
    }
  }
})

router.afterEach(() => {
	NProgress.done();
});

new Vue({
	router,
	store,
	i18n,
	render: h => h(App)
}).$mount("#app");