三级联动路由跳转
首先展示一下完成功能与未完成功能的区别。
未完成功能时,项目效果
未完成功能时,项目效果
完成功能时,项目效果
实现步骤
实现路由跳转有两种方法,一种是声明式导航,一种是编程式导航。在这个案例中选择编程式导航,原因如下:
声明式导航router-link是一个组件,在运行时,如果标签过多,就会产生大量router-link组件,会严重影响项目性能。
确定好跳转的方法后,具体步骤如下,首先为三级联动所在的div绑定一个点击事件(不依次给一级二级三级标签绑定事件的原因同样是为了提升性能)。绑定代码如下所示。
绑定完成后,定义goSearch方法。需要注意两点问题:
1.在这个盒子中存在大量标签,如何确定用户点击的是a标签,而不是其他标签?
2.如何区分一级、二级、三级标签
为了解决这两个问题,就需要引入自定义属性。
首先为标签设置两个自定义属性,分别为data-categoryName与(data-category1Id || data-category2Id || data-category3Id)
我们利用data-categoryName来判断点击的标签是否为a标签,利用data-category1Id 等属性判断该标签为几级标签。如下图所示
自定义属性设置完成后,开始属性goSearch方法,为了利用自定义属性,因此需要为goSearch方法传递参数event。具体代码如下所示。(需要注意,在自定义属性中我们用的驼峰命名法,但是在goSearch方法中,全部变成了小写,这是因为自定义属性在渲染后自动变成了小写)