vue顶部菜单加左侧菜单_通过vue刷新左侧菜单栏操作

本文介绍了在Vue项目中如何解决左侧菜单栏不刷新的问题。通过配置路由、监听路由变化以及使用elementUI和antd的菜单组件,实现了菜单的动态渲染和刷新数据。详细步骤包括设置HTML超链接、创建JS文件导入组件、配置VueRouter、使用computed属性监听路由变化等。
摘要由CSDN通过智能技术生成

今天完成了手头任务就想着做点什么,刚好领导让我看看项目左侧菜单栏不刷新的问题,我也是刚刚接触vue,很多东西都还不是很熟练,这也是我的第一篇自己写的博客,感觉还是很兴奋的,我觉得写博客这个习惯要一直养成,不但总结了自己一天的工作所得,而且也是对自己的一种良好习惯的养成。

下面进入正题。

这个是我们html里面的超链接,而我们的点击事件的跳转就是通过这个超链接实现的。

然后我们要创建一个js文件,将我们要跳转的路径导入

import ChannelList from './src/commodity-manage/channel-list/channel-list'

配置路由管理:

const router = new VueRouter({

routes: [

{

path: '/commodity-list',

name: 'commodity-list',

component: commodityStorage,

children: []

}

]

path:就是我们要跳转的路径

name:跳转文件的名字

component:配置了映射的组件

在html文件中配置了

是用来渲染通过路由映射过来的组件,当路径更改时, 中的内容也会发生更改

在js文件中使用computed来进行监听

//每次让路由生成不同的值&

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值