通过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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
javascript执行环境及作用域详解
2016/05/05 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python静态方法实例
2015/01/14 Python
Python中多线程及程序锁浅析
2015/01/21 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python统计中文字符数量的两种方法
2019/01/31 Python
django富文本编辑器的实现示例
2019/04/10 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
计算机操作自荐信
2013/12/07 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
党委班子对照检查材料
2014/08/19 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
公司经营目标责任书
2015/01/29 职场文书
2015年项目工作总结
2015/04/29 职场文书