通过vue刷新左侧菜单栏操作

今天完成了手头任务就想着做点什么，刚好领导让我看看项目左侧菜单栏不刷新的问题，我也是刚刚接触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：跳转文件的名本文来源gao($daima.com搞@代@#码(网字

component：配置了映射的组件

在html文件中配置了

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

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

 //每次让路由生成不同的值，用于重新加载组件，达到刷新数据的效果 computed: { key() { return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date() } },

补充知识：vue：路由菜单（element 和 antd）

在 vue 中 使用 UI框架中的菜单，给菜单如何添加路由呢？其中会出现路由样式的问题。请看下面两种UI方法。

注）使用框架的时候注入知道的吧。。。。。防止有些人xxxx，我还是写一下。

场景：使用 elementUI 的 NavMenu 时。

这里请注意：可以不使用 router-link，在 e-menu 上面绑定 route 或者 :route = ‘true’ ，然后遍历的时候 :index=‘route.path’ (:index=‘路径’）。

代码

  <div class="menu">   <!-- 一级菜单 --> <i></i><span>{{route.meta.title}}</span><!-- 二级菜单 --> 1' :key='index' :index='route.path'>  <i></i> {{route.meta.title}}   <i></i> {{item.meta.title}} </div> .el-menu { text-align: left; } 

场景：使用 antd 的 Menu 时。

这个里面是需要使用route-link做路由跳转的。

代码

  <div class="menu">   <!-- 一级菜单 -->   {{ route.meta.title }} <!-- 二级菜单 --> <span><span>{{ route.meta.title}}</span></span>  <!--  --> {{ item.meta.title }} </div>