vue动态路由_vue-router通过接口请求动态生成路由的实现

时间: 2018-12-18阅读: 1710标签: 路由

在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,我们希望vue-router通过接口请求动态生成路由,在vue-router 2.2版本新增了一个router.addRoutes(routes)方法,即可用它来实现动态路由了。  下面就直接上代码。


routers.js代码如下:

const _import = file => require('../pages/' + file + '.vue').default
//全局路由(无需嵌套)
const globalRoutes = [
  { path: '/404', component: _import('404'), name: '404',meta: { title: '404' } },
  { path: '/login', component: _import('login'), name: 'login',meta: { title: '登录页' }},
]
//主入口路由(需嵌套整体布局页面)
const mainRoutes = {
  path: '/',component: _import('index'),name: 'index', children: []
}
//实例化
const router = new VueRouter({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),
  isAdd: false, //是否已经添加动态(菜单)路由
  routes: globalRoutes.concat(mainRoutes)
})
router.beforeEach((to, from, next) => { //添加动态(菜单)路由
  if (router.options.isAdd || isGlobalRoutes(to)){//判断是否已经添加动态路由,或者当前为全局路由的时候。 直接访问
    next()
  }else{
  	const menus=[//测试-数据 typ[0上级菜单,1页面菜单,2页面功能],这里是http请求后端接口获取数据路由数据。
  		{id: 1, parentId: 0, name: "系统管理", url: "sys",type:0},
			{id: 2, parentId: 1, name: "账号管理", url: "sys/account",type:1},
			{id: 3, parentId: 1, name: "菜单管理", url: "sys/menu",type:1},
			{id: 4, parentId: 1, name: "角色管理", url: "sys/role",type:1},	
			{id: 5, parentId: 0, name: "数据管理", url: "data",type:0},
			{id: 6, parentId: 5, name: "用户管理", url: "data/user",type:1},
			{id: 7, parentId: 0, name: "审核管理", url: "examine",type:0},
			{id: 8, parentId: 7, name: "短视频审核", url: "examine/video",type:1},
			{id: 9, parentId: 7, name: "相册审核", url: "examine/photos",type:1},
		]
  	sessionStorage.setItem('menus', JSON.stringify(menus || '[]'))//存储动态路由,或者使用vuex。以便后面需要。
    addDynamicMenu(menus)
    next({...to, replace: true})
  }
})
//判断当前是否全局路由
function isGlobalRoutes(to){
	for(let i in globalRoutes){
		if(globalRoutes[i].path == to.path){
			return true;
		}
	}
	return false;
}
//添加动态(菜单)路, 参数menu:菜单列表
function addDynamicMenu (menu=[]) {
  var routes=[]
  for(let i in menu){
  	if(menu[i].type==1){
  		var route={path: menu[i].url,component:_import(menu[i].url),name: menu[i].name,}//菜单管理
  	  routes.push(route)
  	}
  }
  mainRoutes.children = routes
  router.addRoutes([//vue-routers2.2版本以上才支持。
    mainRoutes,
    {path:'*', redirect:{name:'404'},}
  ])
  router.options.isAdd=true
}

export default router


在main.js中使用:

//....
import router from './lib/routers'//路由配置

//new
new Vue({
  render: h => h(App),
  router,//路由
}).$mount('#app')


理解Web路由

在Web开发过程中,经常会遇到『路由』的概念。那么,到底什么是路由?简单来说,路由就是URL到函数的映射。route就是一条路由,它将一个URL路径和一个函数进行映射

Vue 动态添加路由及生成菜单

写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单。为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的。

从了解Hash和Html5 History 到简单实现路由

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分),在页面中的hash有多种功能意义:浏览器读取到hash之后自动滚动到该对应元素所在位置的可视区域内

vue-router之hash模式和history模式

hash模式即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。history模式利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。

react-router中的exact和strict

每次用配置react路由都会考虑是否应该给给<Route>组件加上exact或strict。下面妹子将于自认为比较清晰的方式列举出来什么场景需要加和不加。如果没有子路由的情况,建议大家配都加一个exact;

React-Router4.0跳转不置顶解决方案

在使用react-router时会遇到奇怪的问题,比如当我们从首页进入详情页的时候,首页跳转到详情页,首页滚动的位置,进入到详情页的时候也会被记录下来,原因是由于共享了同一个history,所以对记录有所保留,这显然不符合我们的浏览习惯。

前端路由跳转基本原理

目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式,在路由切换时替换 DOM Tree 中最小修改的部分 DOM,来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案,@angular/router、react-router、vue-router

vue 动态添加路由

最近在研究权限的相关东西,自然动态加载路由信息少不了。接下来我就来专门记录下我研究的东西。先后端代码返回一个对象,用java写的,返回的是对象,不是字符,如果是字符前端注意转换成对象。

在vue中使用setTimeout,离开当前路由setTimeout未销毁的问题

从第一个页面跳转到第二个页面后,如果停留在第二个页面,定时器还在运行。如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时,也会出现重复创建setTimeout的情况。

Vue 路由知识点归纳总结

无刷新跳转页面,是单页应用的一大优势,用户体验好,加载速度快,vue 路由的跳转就是无刷新的,它有两种形式,可以在定义路由的时候通过 mode 字段去配置,如果不配置这个字段,那么默认使用的就是 hash 模式。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全