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


Posted in Javascript onAugust 06, 2020

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

下面进入正题。

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

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

然后我们要创建一个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文件中配置了<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()
   }
  },

补充知识:vue:路由菜单(element 和 antd)

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

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

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

场景:使用 elementUI 的 NavMenu 时。

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

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

代码

<template>
  <div class="menu">
    <el-menu default-active='activePath'
         router
         @open='handleOpen'
         @close='handleClose'
         background-color='#545c64'
         text-color='#fff'
         active-text-color='#ffd04b' >
      <template v-for="(route,index) in routes">
        <!-- 一级菜单 -->
        <el-menu-item :key='index' v-if='route.children && route.children.length== 1' :index='route.path'>
          <i :class="'el-icon-' + route.meta.icon"></i>
          <span>{{route.meta.title}}</span>
        </el-menu-item>
 
        <!-- 二级菜单 -->
        <el-submenu v-if='route.children && route.children.length > 1' :key='index' :index='route.path'>
          <template slot='title'>
            <i :class="'el-icon-' + route.meta.icon"></i>
            {{route.meta.title}}
          </template>
          <el-menu-item-group v-for='(item, index) in route.children'>
            <el-menu-item :key='index' :index='resolve(route.path, item.path)'>
              <i :class="'el-icon-' + item.meta.icon"></i>
              {{item.meta.title}}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
 
<script>
 
export default {
  name: 'Menu',
  data() {
   return {
     activePath: this.$router.path,
   }
  },
  computed: { // 计算属性:获取路由
    routes() {
      console.log('test', this.$router)
      console.log('ddd', this.$router.options.routes)
      return this.$router.options.routes
    },
  },
  methods: {
    resolve(p,i){
     return `${p}/${i}`
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
}
</script>
 
<style lang='less'>
  .el-menu {
    text-align: left;
  }
</style>

场景:使用 antd 的 Menu 时。

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

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

代码

<template>
  <div class="menu">
   <a-menu v-model="current" mode="inline" theme="dark">
     <template v-for='route in routes'>
       <!-- 一级菜单 -->
       <a-menu-item v-if='route.children && route.children.length == 1' :key='route.path'>
        <router-link :to='route.path'>
          <a-icon :type='route.meta.icon' />
          {{ route.meta.title }}
        </router-link>
       </a-menu-item>
 
       <!-- 二级菜单 -->
       <a-sub-menu v-else='route.children && route.children.length == 2' key="sub1">
        <span slot="title"><span><a-icon :type='route.meta.icon' />{{ route.meta.title}}</span></span>
        <a-menu-item v-for='item in route.children' :key='item.path'>
          <router-link :to='resolve(route.path,item.path)'>
          <!-- <router-link :to="`${route.path}/${item.path}`"> -->
            <a-icon :type='item.meta.icon' />
            {{ item.meta.title }}
          </router-link>
        </a-menu-item>
       </a-sub-menu>
     </template>
   </a-menu>
  </div>
</template>
 
<script>
 
export default {
  name: 'Menu',
  data() {
   return {
     current: ['/'],
   }
  },
  computed: { // 计算属性:获取路由
    routes() {
      console.log('test', this.$router)
      console.log('ddd', this.$router.options.routes)
      return this.$router.options.routes
    },
  },
  methods:{
    resolve(p,i){
     return `${p}/${i}`
    },
  },
}
</script>

以上这篇通过vue刷新左侧菜单栏操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 #Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 #Javascript
前端开发基础javaScript的六大作用
Aug 06 #Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 #Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 #Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 #Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 #Javascript
You might like
php目录管理函数小结
2008/09/10 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
php 常用的系统函数
2017/02/07 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python3搜索及替换文件中文本的方法
2015/05/22 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
业务经理岗位职责
2013/11/11 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
小学生检讨书大全
2014/02/06 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
部门年终奖分配方案
2014/05/07 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
法制宣传标语集锦
2014/06/25 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
合作意向书怎么写
2019/06/24 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
Python 匹配文本并在其上一行追加文本
2022/05/11 Python