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

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

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


vue 动态添加路由

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

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

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

Vue 路由知识点归纳总结

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

js实现哈西路由原理

在 js 中,有一种方法,可以在不刷新页面的情况下,页面的内容进行变更,ajax 是一种,这里介绍另一种,就是 哈希路由原理,先看一个简单的路由和页面内容关联的例子,要实现两个功能:

React Router 5 发布,更好地支持 React 16

关于 React Router v5 有一个小插曲,其实开发团队原本只是计划发布 React Router 4.4 版本,但由于错误地使用了托字符 (^) —— 将依赖错误地写成 \\\"react-router\\\": \\\"^4.3.1\\\",导致报错。最后团队决定撤销 4.4 版本,直接改为发布 React Router v5。

为你的 React 应用创建路由

通常,当用户在浏览器中键入 URL 时,会向服务器发送 HTTP 请求,然后服务器检索 HTML 页面。对于每个新URL,用户会被重定向到新的 HTML 页面。你可以通过参考下图来更好地理解路由的工作原理。

Node.js的路由

当服务端接收到HTTP请求时,可以通过onRequest() 获取到url, pathname,query,及paramParams参数;为了解析这些数据需要使用url和querystring模块

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

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

vue-router中$route与$router,path与name,params与query的区别梳理

$router : 是路由操作对象,只写对象,$route : 路由信息对象,只读对象,path 和 Name路由跳转方式,都可以用query传参;path路由跳转方式,params传参会被忽略,只能用name命名的方式跳转

vue中路由按需加载的几种方式

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

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

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