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

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

在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,我们希望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')


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1642

Flutter开发之导航与路由管理

所谓路由管理,就是管理页面之间如何跳转,也被称为导航管理。这和原生开发类似,无论是Android还是iOS,导航管理都是通过维护一个路由栈来实现的,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作

Vue路由实现页面跳转的两种方式(router-link和JS)

Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用:通过 <router-link> 实现;<router-link> 组件用于设置一个导航链接,切换不同 HTML 内容

小程序多种路由跳转的区别

从Anjular转换到微信小程序,从功能丰富,便捷操作的WebStorm转换到十分难用,不是很人性的微信开发者工具,一开始真的特别不适应,也许是心理作用吧,从一开始就觉得它不好用,后来也是写不下去,后来调整心态,说试试看吧,后来就是越写越顺手

在 Vue.js 中使用嵌套路由

随着 Vue.js 单页应用(SPA)变得相当复杂,你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例,来展示 Vue Router 中嵌套路由的实用性。

vue 动态添加路由

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

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

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

vue动态加载路由_实现vue动态加载路由器设置

我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现。

vue.router中replace需要返回两次问题及解决方案

现有三个页面a , b , c , 递进关系,a页面router.push跳转至b,b再router.push跳转至c,c使用$router.replace()回到b,然后点击b页面的返回键,需要点击两次才能回到a页面

react-router中的exact和strict

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

vue路由传参主要的3种方式

vue中路由传参主要的3种方式:query方式(push时使用path来匹配)、params模式(push时使用name来匹配)、location预声明参数模式(push使用path来匹配,但是它跟params模式不同)

点击更多...

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