通过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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
在视频前插入广告
2006/11/20 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
Python中的rfind()方法使用详解
2015/05/19 Python
python实现多线程的两种方式
2016/05/22 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python中property属性实例解析
2018/02/10 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
为什么说python适合写爬虫
2020/06/11 Python
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
关于JavaScript轮播图的实现
2021/11/20 Javascript
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android
Python开发五子棋小游戏
2022/05/02 Python