vue单页面多级目录实现

前言

最近接到一个需求是关于设备说明书多级目录展示。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.params
      var 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;
      }
    }

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