通过vue刷新左侧菜单栏

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

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

 <el-menu-item index="3-1"><a href="#/commodity-list">

然后我们要创建一个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: []
    }

name：跳转文件的名字

component：配置了映射的组件

在html文件中配置了<router-view/>

 <router-view :key="key"></router-view>

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

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

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