vue点击菜单，浏览器地址和列表数据发生改变，但是不跳转页面也不刷新页面其他部位的数据

最新推荐文章于 2024-01-05 16:52:22 发布

码代码的阿宅

最新推荐文章于 2024-01-05 16:52:22 发布

阅读量559

点赞数

文章标签： html html5 vue.js css

本文链接：https://blog.csdn.net/qq_38394175/article/details/113591072

版权

文章目录

1.菜单布局及样式

在这里插入图片描述

2.dom

2.1全部请求里面加入下面代码

window.history.replaceState(null, null, 'All');

2.2一级菜单请求

parentMenuFn(index, menuName, e, key, code) {
	//code为后端返回的菜单地址
	window.history.replaceState(null, null, '/'+code+"");
},

2.3二级菜单请求

childMenuFn(e,childIndex, id, level, menuName, parentName, key,parentCode, childCode, parentIndex) {
//parentCode后端返的一级菜单地址；childCode后端返的二级菜单的地址
	let childUrl
	if(childIndex == 0) {
	  childUrl = parentCode+"/"+'all'   //二级菜单全部
	} else {
	  childUrl = parentCode+"/"+childCode   
	}
	window.history.replaceState(null, null, '/'+childUrl+"");
}

2.4路由修改

//点击一级菜单
{
 path: '自己需要加的地址/:id',
  component: home,
  meta: {
    login_require: false,
    title: '首页 - SecIN'
  }
},
//点击二级菜单
{
  path: '自己需要加的地址/:id/:id',
  component: home,
  meta: {
    login_require: false,
    title: '首页 - SecIN'
  }
},