vue单页面多级目录实现
#前言最近接到一个需求是关于设备说明书多级目录展示。Vue 对于我这种小白来说还是有些困难。还是抱着试一试的心态去实践。还是先看看效果图吧。#效果图如下:#路由配置import Vue from 'vue'import Router from 'vue-router'import MedicalEquipmentCatalog from '@/components/MedicalEq...
·
前言
最近接到一个需求是关于设备说明书多级目录展示。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;
}
}
做的比较简单,大致上就这些内容。主要为了记录自己的实践过程。
更多推荐
已为社区贡献3条内容
所有评论(0)