场景描述
- 项目中有一个组件1，在两处需要使用。一处是作为一级菜单的内容使用，一处是作为二级菜单的内容使用。
- 两处的内容有区别，比如一些模板子组件、业务逻辑等。
技术背景
- Vue Router
- 路由参数
- 路由配置
- Vue
- v-if、v-else。
方案解决
- 在router中配置路由，两种不同的路由导向到组件1。
- 在作为一级菜单和二级菜单使用时，采用不同的路由导航，并传递参数。
- 组件1设置标志位，区分当前是一级菜单还是二级菜单。
- 在created钩子中获取路由参数，根据参数赋值给标志位。
- 组件1中根据标志位使用v-if等技术控制模板渲染，JavaScript中也根据标志位决定业务逻辑。
- 其他
- 值得注意的是，如果为相同路由，作为二级菜单使用后，立即作为一级菜单使用，组件1不会经历组件销毁再创建阶段，所以路由参数无法获取。
