验证中...
开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约
片段 1 片段 2
vue路由层次转化与封装.html
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue路由层次转化与封装</title>
</head>
<body>
<script>
let routers = [
{
'club': [ //亲友圈[我是2级路由;我的上级路由是APP]
{ path: "", redirect: "home" }, //默认选择
{ path: 'home', component: 'clubhome' }, //亲友圈列表
{ path: 'title', component: 'clubtitle' }, //亲友圈title
{
'user': [ //亲友圈名单[俱乐部的子路由]
{ path: "", redirect: "whitelist" }, //默认选择
{ path: 'whitelist', component: 'whitelist' }, //白名单列表
{ path: 'whitedesc', component: 'whiteDesc' }, //什么是白名单
]
}
]
},
{
'user': [ //用户
{ path: "", redirect: "main" }, //默认选择
{ path: 'main', component: 'UserMain' }, //我的
]
},
{ path: 'login', component: 'Login' },//登录
{ path: 'register', component: 'Register' },//注册
]
function switchRouter(routers) {
let router = []
routers.forEach((r) => {
//判断数组中的每一项是不是单项,
//如果是单项则为需要处理的路由,
//如果是多项则将其直接插入路由
if (Object.keys(r).length <= 1) {
for (const key in r) {
// 查看是否是对象自身下面的属性
if (r.hasOwnProperty(key)) {
let val = {
path: `/${key}`,
component: key,
children: switchRouter(r[key])
}
router.push(val)
}
}
} else {
router.push(r)
}
})
return router
}
console.log(switchRouter(routers))
</script>
</body>
</html>
转化后的路由展示.png

评论列表( 2 )

1329024_hjm100
鸿基梦 2018-05-18 16:01

上述总结存在一些问题

  1. 不必要过度封装子路由可以采用下列数据结构

  2. router.config.js文件不需要大的改变,如果你有更好的办法

  3. 我们可以互相交流与学习谢谢

const CLUB_ROUTER = [{
    path: "/club", component: club, children: [
        {path: "",redirect: "home" }, //默认选择
        {path:'home' , component: clubhome, meta: { title: "我的亲友圈" }, name: "clubhome" },//我的亲友圈
    ]
}]

备注

  1. 路由子文件不建议使用格式化工具格式化,一个子对象可以放在一行,

  2. 这样有助于维护与查看

1329024_hjm100
鸿基梦 2018-05-17 15:56

关于api链接的封装:

  1. 首先考虑API配置文件怎么拆分,对于接口,我们肯定有多套环境,多套环境那么API的URL也不一样,

  2. 拆分成多个文件后多个文件需要共用同一个获取apiBase的方法,

  3. 所以这个apiBase就要写在公共的地方,在这里原来的api.config.js就变成了公共配置,apiBase就放在此文件内。

/**
 * api.config.js api配置文件
 * User: hjm100
 * Date: 18-05-16 16:55 
 */
export function apiBase() {
  let hostname = window.location.hostname,
    API_BASE_URL = 'http://192.168.1.237';//本地测试
  if(hostname === 'hjm100.cn') {  //正式环境
    API_BASE_URL = 'http://hjmapi.cn';
  } else if(hostname === 'hjmtest.cn') {//公网测试环境
    API_BASE_URL = 'http://hjmtestapi.cn';
  } else if(hostname === 'hjmdev.cn') {//内网测试环境
    API_BASE_URL = 'http://hjmdevapi.cn';
  }
  return API_BASE_URL;
}
//然后在每个子API配置文件中引入即可:

import {apiBase} from '../api.config';

Vue.js项目Router配置拆分之旅

vue服务封装基于axios

vue脚手架项目

你可以在登录后,发表评论

搜索帮助