通过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在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
vue 左滑删除功能的示例代码
Jan 28 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实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
js表单验证实例讲解
2016/03/31 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
Angular5中状态管理的实现
2018/09/03 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
详解python单元测试框架unittest
2018/07/02 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python logging.info在终端没输出的解决
2020/05/12 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
志愿者活动总结
2014/04/28 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis