首页 > 其他分享> 文章详细

初始化vueadmin

2021-08-04 11:34:37 阅读：169 来源： 互联网

标签：初始化 vueadmin route component js router import children

1.克隆：https://github.com/PanJiaChen/vue-admin-template.git

2.修改中文：main.js

3.在不使用模拟数据时：

设置反向代理：

　　1.在env.development，设置/api

2. vue.config.js 设置测试环境反向代理

其中把原来的before注释或者删掉

重启

4.设置请求信息和状态在utils/request.js中

超时报错5000也在这个页面

上面无效改下面的

5.导航守卫：permission.js

分水岭-----------------------

鉴权一：路由表形式

原理：后端返回路由表，我们根据路由表进行渲染

首先修改moke数据，找到mock/user.js、修改users

const users = {

"avatar": 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
"name": 'Super Admin',
"router":[{
"path": "/example",
"component": "Layout",
"redirect": "/example/table",
"name": "Example",
"meta": { "title": "Example", "icon": "el-icon-s-help" },
"children": [
      {
"path": "table",
"name": "Table",
"component":"table/index",
"meta": { "title": "Table", "icon": "table" }
      },
{
"path": "tree",
"name": "Tree",
"component": "tree/index",
"meta": { "title": "Tree", "icon": "tree" }
      }
    ]
  }]
}

modules.js

在router中新建两个文件

_import_development.js

// 导入开发环境
module.exports = file => require('@/views/' + file + '.vue').default

_import_production.js

// 导入生产环境
module.exports = file => require('@/views/' + file + '.vue')

在permission.js中引入

// ------------引入
import Layout from '@/layout'
const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件

两个方法

function routerGo(to, next) {
const menus = filterAsyncRouter(store.getters.menus)// 过滤路由
console.log(menus)
router.addRoutes(menus) // 动态添加路由
global.antRouter = menus // 将路由数据传递给全局变量，做侧边栏菜单渲染工作
next({ ...to, replace: true })
}
function filterAsyncRouter(asyncRouterMap) { // 遍历后台传来的路由字符串，转换为组件对象
const accessedRouters = asyncRouterMap.filter(route => {
if (route.component) {
if (route.component === 'Layout') { // Layout组件特殊处理
route.component = Layout
      } else {
        route.component = _import(route.component)
      }
    }
if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
return true
})

return accessedRouters
}

修改layout/component/sidebar/index.js

// return this.$router.options.routes
return this.$router.options.routes.concat(global.antRouter)

permission.js

标签：初始化,vueadmin,route,component,js,router,import,children
来源： https://www.cnblogs.com/lixiaosong/p/15098113.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

初始化vueadmin