学习动态添加路由后的收获

1.addRoutes基本使用

格式

router.addRoutes([路由配置对象])
或者:
this.$router.addRoutes([路由配置对象])

示例:

// 按钮
<button @click="hAddRoute">addRoute</button>

// 回调
hAddRoute() {
    this.$router.addRoutes([{
        path: '/abc',
        component: () => import('@/views/abc'),
        }])
},

上诉代码运行后,点击了"addRoute"按钮,就可以在地址中访问/abc了。因此,我们就可以通过这个api在路由守卫页面来生成可以访问的动态路由,思路如下:

 2.从actions中获取值

问题:    如果数据存储在vuex中的action中,该如何调用呢?

答案:    从action中return出来就可以了,类似于调用一个函数,所得到的值就是调用的该函数renturn出来的值

 

 3.刷新页面时跳到404的bug

原因:     路由设置中的404页处在中间位置而不是所有路由的末尾了。

解决:     把404页改到路由配置的最末尾就可以了

接着上图看,在把路由添加进配置之前把404放在最后,记得把静态路由中的404页面删除

 4.对于addRoute添加的路由，在刷新时会白屏

 5.退出登录时重置路由

退出后，再次登陆，发现菜单异常 （控制台有输出说路由重复）

原因:      路由设置是通过router.addRoutes(filterRoutes)来添加的，退出时，并没有清空，再次登陆，又加了一次，所以有重复。

解决:      编辑一个重置路由的方法,如下所示:

 这个方法就是将路由重新实例化，相当于换了一个新的路由，之前加的路由就不存在了，需要在登出的时候， 调用一下即可

 6.自定义指令

注册格式

 

 使用格式:

<input v-foucs="'xxxx'" />

用上诉方法可以解决按钮级别的权限验证

 

 上诉自定义指令的作用就是判断某个数据集是否包含binding.value这个值,如果不包含则删除这个元素自身