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

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

在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,我们希望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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

前端路由跳转基本原理

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

react-router中的exact和strict

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

vue-router的简易实现

现在很多项目的前端都是用vue单页面实现的,而单页面中最重要的一个环节就是路由,今天来实现一个简易版本的vue-router。

Flutter 如何在切换页面的时候,把参数传到下一个页面?

讲解Flutter 路由传递,这是一个大的概述图。当 app 的页面变多的时候,就需要考虑页面传值的问题,在第一个页面如何把数据传递到 另外一个页面?最最基本的方法是在打开新页面,传递参数过去。但当 app 变得很大或者功能变多

React Router拦截器(钩子)、静态路由、route-view 实现

React Router 再 v3 版本之前 是有 onEnter 钩子函数的,也支持静态路由配置;,但到了 v4 版本后钩子函数被移除,官方说是为了将此提供给开发者,由开发者自由发挥。既然如此我们就只能自己实现

vue 路由过渡动效

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:在进入/离开的过渡中,会有 6 个 class 切换。v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

Vue Router4 的相对之前的变化

Vue 3 引入了createApp API,该API更改了将插件添加到Vue实例的方式。 因此,以前版本的Vue Router将与Vue3不兼容。Vue Router 4 引入了createRouter API,该API创建了一个可以在Vue3中安装 router 实例。

vue路由history模式_如何去除vue项目中的#

在使用vue-cli搭建的环境中,浏览器上URL地址中是存在#的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式mode: history

vue-router 中参数传递(params,query)

query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示。

实现一个前端路由,如何实现浏览器的前进与后退?

如果要你实现一个前端路由,应该如何实现浏览器的前进与后退 ?首先浏览器中主要有这几个限制,让前端不能随意的操作浏览器的浏览纪录:没有提供监听前进后退的事件。

点击更多...

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