100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue-router动态路由设置自定义首页

vue-router动态路由设置自定义首页

时间:2018-11-11 18:22:03

相关推荐

vue-router动态路由设置自定义首页

需求:胚子为vue-element-template做了些许改动,项目分为管理端和客户端,管理端设置好用户并 且可以支持用户自定义选择展示的首页,客户端用户进入主页时直接显示客户设置的对应首页

实现:1.首先设置好静态路由,设置好根路径,即刚进入页面路径为'/'的重定向页面,以此触发路由全局 守卫,判断没有token进入登陆页面。

{

path:'/',

redirect:'/dashBoard'

}

2.遇到问题点:因为首页是用户自定义的,所以在对后端请求来的数据除了需要使用递归处理成路 由的数组结构还要用自定义的首页ID查询出对应的首页路由,(我这里是记录了对应的name方 便后续跳转使用),最后在递归函数的末尾往动态路由再push一个路由规则,我这里写成

{

path:'/index',

redirect:{name:首页name}

}

3.登录跳转时路径需要更改成router.push('/index'),permission.js里判断有token跳转到登录页 时需要限制跳转到'/index',这样就可以实现

4.如果用户没有登出操作,那么token会持续一段时间生效,那么刚进来时进入的路径'/'是不做限 制的,这时会发现跳转到了'/dashBoard',所以这里需要做调整,如果进入的to.path是

'/dashBoard'则强制跳转到'/index'

总结:使用了重定向以及静态路由和动态路由,之前一直想更改静态路由里面'/'的重定向,显然不合理,静态路由在初始化页面时就已经挂载好,后续更改时比较麻烦。所以另辟蹊径,因为动态路由是后续router.addRouter添加到路由中去,所以可以在这里定义规则以及重定向跳转到的自定义首页。

注意点:'/'的重定向路径不能是'/index',不然路由匹配的优先级会有影响。(至此实现对应功能,我是这样实现的,欢迎一起探讨~)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。