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;
      }
    }
複製代碼

作的比較簡單，大體上就這些內容。主要爲了記錄本身的實踐過程。