vuerouter定义动态路由,vue-router怎么定义动态路由

　　摘要：本文主要介绍了vueRouter - matcher的动态增减路由方式，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

matcher之动态增减路由

　　优化项目时，主路线下有一个环节。根据后端返回的不同内容，需要修改动态路由。如果直接删除原路由，给Router添加新路由，会发现原路由依然存在。Vue动态添加路线，但是没有删除功能(貌似vue官方文档没有提供)。

解决办法

　　使用匹配器：

　　const createRouter=()=新路由器({

　　路线：[{

　　路径：“/”，

　　名称：登录，

　　组件：登录

　　}]

　　const router=createRouter()

　　导出函数resetRouter () {

　　const newRouter=createRouter()

　　router . matcher=new router . matcher

　　}

　　导出默认路由器

　　本地介绍，在添加路由器之前只需调用一次resetRouter:

　　从“@/路由器”导入{resetRouter}

　　reset router()；

　　这个。$ router . add routes(route menu)；

番外

　　如果需要删除添加的一级路由下的单个子路由，可以通过这个得到路由数组。$router.options.routes，直接以循环方式推送或拼接，然后用上述方法全局替换。

vueRouter动态追加路由

　　路由分为静态路由，如预写路由和公共路由，如404、登录等。

　　另一部分是根据权限接口返回动态添加的一些页面模块路由，比如user。

　　处理权限时，可以先允许一些不需要权限认证的路由，如下所示：

　　//打开路由，可以直接访问

　　const ALLOW_ROUTES=[

　　/登录，

　　/购买，

　　//.

　　];

具体路由拦截全在router.beforeEach里处理

　　如果您没有首先登录，请直接跳转到登录页面。

　　如果(！ALLOW_ROUTES.includes(to.path)！islin){//未登录

　　下一个({

　　路径：“/login”，

　　替换：真

　　});

　　返回；

　　}

　　如果您已登录，请使用router.addRoutes添加路由。

　　if(is login(session storage . getitem( curPath ) to . matched[0])。path=== * ){

　　session storage . remove item( curPath )；

　　//恢复路由(防止重复路由)

　　router.matcher=new VueRouter({

　　//模式：历史，

　　路线

　　}).matcher

　　router . add routes(routes:ArrayRouteConfig)；//追加路线

　　//util . generate menu()；//生成菜单，视具体情况而定

　　下一个({

　　路径：to.path

　　});

　　返回；

　　}

　　动态添加更多路由规则。该参数必须是满足routes选项要求的数组。

curPath用于辅助处理

　　router.afterEach(to={

　　//保存路径

　　if (to.path！==/login) {

　　session storage . setitem( curPath ，JSON.stringify({

　　路径：to.path

　　}));

　　}

　　})

　　动态路由主要基于业务，很难写出通用的处理方式。什么时候添加路线由你自己决定，比如刷新，注销，重新登录，不匹配。

　　如果还是遇到重复走线的问题，可能是在当前页面推送相同的走线造成的。在这里，你可以先做个判断。

　　if(router . current out . name！==登录){

　　router.push({

　　名称：“登录”

　　})

　　}

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。