vue单页面多级目录实现

前言

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

效果图如下:

效果图.gif

路由配置

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();
    }
  },

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

截取

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

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

### 配置Vue.js中的多级页面路由 在Vue.js中配置多级页面的路由涉及使用`vue-router`库以及其提供的嵌套路由特性。安装并引入`vue-router`之后,可以按照如下方式设置多结构的路由。 对于一个多级页面的应用程序而言,通常会有一个主布局文件作为顶级组件,在此之下再划分不同级别的子视图区域用于展示特定的内容片段。这可以通过定义父子关系的路径模式实现[^1]: ```javascript // main.js 或入口文件里初始化router实例 import { createRouter, createWebHistory } from 'vue-router' import Home from './components/Home.vue' // 假设这是首页对应的组件 import ParentPage from './components/ParentPage.vue' // 父页面组件 import ChildPageA from './components/ChildPageA.vue' // 子页面A组件 import ChildPageB from './components/ChildPageB.vue' // 子页面B组件 const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/parent', // 父级路由地址 name: 'Parent', component: ParentPage, children: [ // 使用children属性指定子路由 { path: 'child-a', // 相对父级path下的子路径 name: 'ChildA', component: ChildPageA }, { path: 'child-b/:id?', // 可选参数:id表示该位置可传入动态ID name: 'ChildB', component: ChildPageB } ] } ] const router = createRouter({ history: createWebHistory(), routes }) ``` 上述代码展示了如何创建具有两深度(即一级和二级)的路由体系。其中,`ParentPage`作为一个容器型组件负责渲染它下面更深次的具体内容;而它的两个孩子节点分别是`ChildPageA`和`ChildPageB`,它们各自对应不同的URL片段,并且可以在访问时被单独加载显示出来[^2]。 为了进一步扩展这种次化的架构,还可以继续向已有的任何一添加更多的子项,只需遵循相同的逻辑即可形成任意数量级别深浅不一的导航链接集合。 当涉及到实际项目开发过程中遇到的问题或者想要深入学习更多关于Vue的知识,《Vue.js 3.x+Element Plus从入门到精通:视频教学版》提供了详细的指导和支持材料,有助于开发者更好地理解和运用这一强大的前端技术栈[^3]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值