通过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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
js实现图片上传即时显示效果
Sep 30 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
GD输出汉字的函数的分析
2006/10/09 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
python非递归全排列实现方法
2017/04/10 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python路径的写法及目录的获取方式
2019/12/26 Python
利用Python计算KS的实例详解
2020/03/03 Python
python游戏开发的五个案例分享
2020/03/09 Python
python3跳出一个循环的实例操作
2020/08/18 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
一份恶作剧的检讨书
2014/09/13 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
工地材料员岗位职责
2015/04/11 职场文书
大学推普周活动总结
2015/05/07 职场文书
辞职申请书范本
2019/05/20 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫