关于vue - addRoutes动态添加路由碰到的问题
看了一下很多人都被 这个动态添加路由这个问题困惑 ,今天来分享一下自己的思路
大神请多多指点,代码哪里写的不好,我可以改.第一次写,写的不好你们也不要喷我,写这个就是为了和我这样的小白多交流交流,谢谢!
直接上代码吧,不多逼逼了
首先src/router/index.js文件
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
Vue.use(VueRouter);
// 注意,这里存放的是静态路由,就是不需要任何权限 ,所有人都可以看到的!不要放404,不要放404,不要放404
const routes = [
{
path: “/login”,
name: “login”,
component: () => import("@/views/login"),
hidden: true
}
];
const router = new VueRouter({
mode: ‘history’,
base: process.env.BASE_URL,
routes
});
export default router;
然后 src/views/logo.vue
上面的html代码就不贴了,写的太丑
引入import {addRouter} from “…/addRoute”; //addRoute这个文件下面会写出来,里面处理第一次登陆 和 刷新页面
注意:登陆函数 里面 判断,登陆成功 调用 addRouter(userPermissions); //userPermissions百度查了 一下,这个单词好像是 用户权限 ,嘻嘻, 这个参数就是你登陆成功后台给你们传过来的权限列表
我们的是这样的 :
[
{
“path”: “/”,
“name”: “概况”,
“icon”: “el-icon-pie-chart”,
“component”: “/index”,
“children”: [
{
“path”: “/realData”,
“name”: “实时数据”,
“component”: “/overView/realData”
}, {
“path”: “/statistics”,
“name”: “数据统计”,
“component”: “/overView/statistics”
}
]
}, {
“path”: “/”,
“name”: “用户分析”,
“icon”: “el-icon-user”,
“component”: “/index”,
“children”: [
{
“path”: “/newUsers”,
“name”: “新增用户”,
“component”: “/userAnalysis/newUsers”
}, {
“path”: “/activeUser”,
“name”: “活跃用户”,
“component”: “/userAnalysis/activeUser”
}, {
“path”: “/retainedUsers”,
“name”: “留存用户”,
“component”: “/userAnalysis/retainedUsers”
}, {
“path”: “/payingUser”,
“name”: “付费用户”,
“component”: “/userAnalysis/payingUser”
}, {
“path”: “/numberStarts”,
“name”: “启动次数”,
“component”: “/userAnalysis/newUsers”
}, {
“path”: “/useTime”,
“name”: “使用时长”,
“component”: “/userAnalysis/useTime”
}, {
“path”: “/activePeriod”,
“name”: “活跃时段”,
“component”: “/userAnalysis/newUsers”
}, {
“path”: “/versionDistribution”,
“name”: “版本分布”,
“component”: “/userAnalysis/versionDistribution”
}, {
“path”: “/terminal”,
“name”: “设备终端”,
“component”: “/userAnalysis/terminal”
}
]
}
]
最后 src/addRouter/index.js
import store from “@/store”;
import router from “@/router”;
// 登录成功之后,处理返回的路由数据
export const addRouter = (content) => {
store.commit(‘userPermissions’, content);
for (let i = 0; i < content.length; i++) {
content[i].component = resetComponent(content[i].component);
if(content[i].children.length > 0){
for (let x = 0; x < content[i].children.length; x++) {
content[i].children[x].component = resetComponent(content[i].children[x].component);
}
}
}
content.concat({
path: “/404”,
name: “”,
component: () => import("@/views/notFound/notFound"),
hidden: true
}, {
path: ‘*’,
hidden: true,
redirect: {
path: ‘/404’
}
});
router.options.routes = content;
router.addRoutes(content);
};
// 刷新后重新增加路由,防止页面空白
export const resetRouter = () => {
if(sessionStorage.getItem(“userPermissions”)){
let content = JSON.parse(sessionStorage.getItem(“userPermissions”));
store.commit(‘userPermissions’, content);
for (let i = 0; i < content.length; i++) {
content[i].component = resetComponent(content[i].component);
if(content[i].children.length > 0){
for (let x = 0; x < content[i].children.length; x++) {
content[i].children[x].component = resetComponent(content[i].children[x].component);
}
}
}
content.concat({
path: “/404”,
name: “”,
component: () => import("@/views/notFound/notFound"),
hidden: true
}, {
path: ‘*’,
hidden: true,
redirect: {
path: ‘/404’
}
});
router.options.routes = content;
router.addRoutes(content);
}
};
// 处理路由中 component 数据
export const resetComponent = (path) => {
return () => import(’@/views’ + path + ‘.vue’);
};
这就完啦,哪里写的不好的,请指点一下,谢谢了,第一次写,有点激动!
来源：CSDN
作者：weixin_40073146
链接：https://blog.csdn.net/weixin_40073146/article/details/103751226