项目笔记10（尚品汇）

三级联动路由跳转

首先展示一下完成功能与未完成功能的区别。
未完成功能时，项目效果

未完成功能时，项目效果

完成功能时，项目效果

实现步骤

实现路由跳转有两种方法，一种是声明式导航，一种是编程式导航。在这个案例中选择编程式导航，原因如下：
声明式导航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方法中，全部变成了小写，这是因为自定义属性在渲染后自动变成了小写）