前端的路由如何实现跳转?

下面的路由配置- 访问路径为: 

http://localhost:9999/#/ok/productData/tpProductData

js配置路由跳转
const tpRouter = {
    path: '/ok',
    component: Layout,
    name: 'ok',
    meta: {},
    children: [
        {
            path: 'indexPricing',
            component: () => import('@/views/tp/indexPricing'),
            name: 'indexPricing'
        },
        {

            path: 'productData',
            component: () => import('@/views/tp/indexPricing'),
            redirect: '/tp/productConfiguration/productData/tpProductData',
            children: [
                //这个是跳转产品类别列表
                {
                    path: 'tpProductData',
                    component: () => import('@/views/tp/product-configuration/product-data/index.vue'),
                    name: 'tpProductData'
                },

            ]
        }


    ]
}

路由跳转到对应的 界面




  methods: {
    //跳转产品数据页
    handleClick() {
//这里是使用的 js  别名去跳转的  ,配合上面js 配置 
      this.$router.push({ path: '/tp/productData/tpProductData' });

    }}

下面的目录通过调用上面的 点击事件 去实现页面的跳转


下面的是index.vue界面的目录,他需要跳转到对应的产品配置页面  
     <el-menu-item index="1-2-1"  @click="handleClick()">OK产品配置</el-menu-item>