前言

最近接到一个需求是关于设备说明书多级目录展示。Vue 对于我这种小白来说还是有些困难。还是抱着试一试的心态去实践。还是先看看效果图吧。 #效果图如下:

路由配置

import Vue from 'vue'
import Router from 'vue-router'
import MedicalEquipmentCatalog from '@/components/MedicalEquipmentCatalog';
import MedicalDeviceDetailsDisplay from '@/components/MedicalDeviceDetailsDisplay';
import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(Router);
Vue.use(ElementUI);
Vue.component("lxc-medical", MedicalEquipmentCatalog);const ChildComponents = {template: '<div><lxc-medical></lxc-medical></div>'
}export default new Router({routes: [{path: '/',name: 'MedicalEquipmentCatalog',component: MedicalEquipmentCatalog,meta: {title: '设备目录'}},{path: '/:id',component: ChildComponents,},{path: '/details',name: 'MedicalDeviceDetailsDisplay',component: MedicalDeviceDetailsDisplay,meta: {title: '设备详情'}}]
})
复制代码

这里配置了两个页面，一个是单页面的目录展示，和设备详情的展示页面。还有一个是动态路由配置。点击了解动态路由配置 这里全局注册了设备列表的组件。

跳转

 gotoNextPage() {console.log("gotoNextPage id = " + this.parentId);this.$router.push({name: "MedicalDeviceDetailsDisplay",params: {id: this.parentId}});},gotoThisPage() {this.$router.push({path: "/" + this.parentId,params: {id: this.parentId,name: this.title_name}});}
复制代码

一个是实现跳转当前页面的方法，和跳转到设备详情的页面。这里传入的是当前设备的id 以及设备的名字。

获取参数

 getParams() {console.log("getParams()调用");// 取到路由带过来的参数 this.$route.paramsvar routerParams = this.$route.params.id;var routerParams_title_name = this.$route.params.name;console.log("routerParams = " + routerParams +" routerParams_title_name = " + routerParams_title_name);// 将数据放在当前组件的数据内this.parentId = routerParams;this.title_name = routerParams_title_name;}
复制代码

  created() {this.getParams();this.requestData();}
复制代码

通过页面created的回调去获取参数。刷新单页面的数据。我自己在测试的时候发现一级目录点击跳转二级目录的时候是好的。但是二级目录去点击跳转三级目录的时候发现路由是有更新的，但是并没有触发created回调。同一个组件并未渲染。所以我想监听url 的路由变化去自己实现数据的刷新。

watch监听

  watch: {$route(to, from) {console.log("watch path = " + to.path);this.changeValue(to.path);this.requestData();}},
复制代码

通过打印发现其实路径还需要截取处理才能获取到设备的id去重新刷新页面

截取

changeValue(str) {this.parentId = str.replace("/", "");console.log("changeValue parentId = " + this.parentId);if (this.title_name) {document.title = this.title_name;}}
复制代码

做的比较简单，大致上就这些内容。主要为了记录自己的实践过程。