从零搭建vue项目:3vue-router控制路由导航

vue提供了官方路由组件,指导教程如下

https://router.vuejs.org/zh/

研究了2天,之前的项目修改如下

/src/router/index.js

从零搭建vue项目:3vue-router控制路由导航_第1张图片

/src/components/index.vue

从零搭建vue项目:3vue-router控制路由导航_第2张图片

效果


从零搭建vue项目:3vue-router控制路由导航_第3张图片


从零搭建vue项目:3vue-router控制路由导航_第4张图片


从零搭建vue项目:3vue-router控制路由导航_第5张图片


vue-router还有很多灵活的功能和配置,暂时还没用到,像导航守卫、重定向等等,后面用到了再琢磨。

我估计很多项目,例如我公司的项目,不同的用户登录到系统中,看到的菜单是不同的,我们是通过“用户-权限-菜单”这种控制策略来控制的,

下一步要对这个进行研究,让不同用户登录进来看见不同的红黄蓝按钮。

你可能感兴趣的:(从零搭建vue项目:3vue-router控制路由导航)