=====================生成完整路徑實力========================html
http://localhost:8080/index.html#/materials/ModelSelectionCustomPart/process/pboid36049800vue
==============router=================ui
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=============this
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========code
<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>