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

 

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

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>

　　

 

 

------------------

 

js 里面首先会有一个路由的的名称 : tpRouter

这个tpRouter 会被配置引入到一个全局 容器里面, index.js  (看下面的index.js实现)

import Layout from '@/layout'

const tpRouter = {
    path: '/tp',
    component: Layout,
    name: 'tp',
    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'
                } 
            ]
        }


    ]
}
export default tpRouter

　　

全局容器 index.js实现多个路由动态配置:

因为tpRouter  是对应一个vue界面里面路由跳转的js, 然后把这个tprouter 配置到一个全局的 index,js 里面  就可以实现动态寻找路由

this.$router.push({ path: '/tp/productData/tpProductDimension' });   (里面的path是tpRouter里面设置的 路由跳转别名)  这里因为路由被注入到全局了, 所以可以通过router.push 然后通过别名找到对应的路由界面

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)   这里就是全局的路由配置地方

/* Layout */
import Layout from '@/layout'

/* Router Modules */
import vatRouter from './modules/vat'
import rdRouter from './modules/rd'
 xxx
xxx
xxxxx

这个是我们用到的路由配置路径
import tpRouter from './modules/tp'