Vue路由配置

=====================生成完整路径实力========================

http://localhost:8080/index.html#/materials/ModelSelectionCustomPart/process/pboid36049800

==============router=================

Vue.use(VueRouter)
import { getHashParameters } from '@/global.js'
var typeName = getHashParameters("typeName")
var category = getHashParameters("category")
var categorys = [
  {
    name: "materials",
    list: () => import('@/materials/materials-list'),//列表页
    process: () => import('@/materials/materials-process'),//流程页
    children:[]
  },
  {
    name: "partlist",
    list: () => import('@/partlist/part-list'),
    process: () => import('@/partlist/part-information'),
    children:[{
      path: "partcompare",
      component: () => import('@/partlist/moudel/part-compare'),
    }]
  },
  {
    name: "enterance",
    list: () => import('@/scene/enterance')
  }
]
var routes = []
var myApp = { template: "<router-view />" }
for (var i = 0; i < categorys.length; i++) {
  if(categorys[i].name == category){
  if (typeName) {
    try{
          myApp = require("@/scene/" + categorys[i].name + "/" + typeName).default //给每个不同typename 添加index入口文件
        }
        catch(err)
        {
          console.log(err);
        }
    var r = {
      path: '/' + categorys[i].name + '/:typeName',
      component: myApp,
      children: [
        {
          path: '',
          component: categorys[i].list
        },
        {
          path: 'process',
          component: categorys[i].process
        },
        {
          path: 'process/:pboid',
          component: categorys[i].process
        }
      ]
    }
    for (var k = 0; k < categorys[i].children.length; k++) {
      r.children.push({
        path: categorys[i].children[k].path,
        component: categorys[i].children[k].component
      })
    }
    routes.push(r)
  } else {
    routes.push({
      path: '/' + categorys[i].name,
      component: categorys[i].list
    })
  }
}
}
export default new VueRouter({
  routes: routes
})

=======================global.js=============

export function getHashParameters(key){
    var arr = (location.hash || "").split("?")[0]
    arr = arr.split(/\/|\?|\&|\=/)
    if(key == "typeName"){
        return arr[2]
    }
    if(key == "category"){
        return arr[1]
    }
}

=========目录/scene/categorys名称/typename名称/index.vue========

<template>
  <router-view ></router-view>
</template>
<script>
export default {
  data() {
    return {
      objectValue:{}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      this.$root.Bus.$on("onceFn", (objectValue, object) => {
        this.objectValue = objectValue
      });
    },
  }
};
</script>

 

转载于:https://my.oschina.net/u/4099729/blog/3063681