溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue項(xiàng)目中如何實(shí)現(xiàn)刷新左側(cè)菜單欄

發(fā)布時(shí)間：2020-11-09 16:46:50 來源：億速云 閱讀：382 作者：Leah 欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)vue項(xiàng)目中如何實(shí)現(xiàn)刷新左側(cè)菜單欄，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

這個(gè)是我們html里面的超鏈接，而我們的點(diǎn)擊事件的跳轉(zhuǎn)就是通過這個(gè)超鏈接實(shí)現(xiàn)的。

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

然后我們要?jiǎng)?chuàng)建一個(gè)js文件，將我們要跳轉(zhuǎn)的路徑導(dǎo)入

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：就是我們要跳轉(zhuǎn)的路徑

name：跳轉(zhuǎn)文件的名字

component：配置了映射的組件

在html文件中配置了<router-view/>

<router-view :key="key"></router-view>

是用來渲染通過路由映射過來的組件，當(dāng)路徑更改時(shí)，<router-view> 中的內(nèi)容也會(huì)發(fā)生更改

在js文件中使用computed來進(jìn)行監(jiān)聽

 //每次讓路由生成不同的值，用于重新加載組件，達(dá)到刷新數(shù)據(jù)的效果
  computed: {
   key() {
     return this.$route.name !== undefined&#63; this.$route.name +new Date(): this.$route +new Date()
   }
  },

補(bǔ)充知識(shí)：vue：路由菜單（element 和 antd）

在 vue 中 使用 UI框架中的菜單，給菜單如何添加路由呢？其中會(huì)出現(xiàn)路由樣式的問題。請(qǐng)看下面兩種UI方法。

注）使用框架的時(shí)候注入知道的吧。。。。。防止有些人xxxx，我還是寫一下。

vue項(xiàng)目中如何實(shí)現(xiàn)刷新左側(cè)菜單欄

場(chǎng)景：使用 elementUI 的 NavMenu 時(shí)。

這里請(qǐng)注意：可以不使用 router-link，在 e-menu 上面綁定 route 或者 :route = 'true' ，然后遍歷的時(shí)候 :index=‘route.path' (:index=‘路徑'）。

vue項(xiàng)目中如何實(shí)現(xiàn)刷新左側(cè)菜單欄

代碼

<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">
        <!-- 一級(jí)菜單 -->
        <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>
 
        <!-- 二級(jí)菜單 -->
        <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: { // 計(jì)算屬性：獲取路由
    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>

場(chǎng)景：使用 antd 的 Menu 時(shí)。

這個(gè)里面是需要使用route-link做路由跳轉(zhuǎn)的。

vue項(xiàng)目中如何實(shí)現(xiàn)刷新左側(cè)菜單欄

代碼

<template>
  <div class="menu">
   <a-menu v-model="current" mode="inline" theme="dark">
     <template v-for='route in routes'>
       <!-- 一級(jí)菜單 -->
       <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>
 
       <!-- 二級(jí)菜單 -->
       <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: { // 計(jì)算屬性：獲取路由
    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>

看完上述內(nèi)容，你們對(duì)vue項(xiàng)目中如何實(shí)現(xiàn)刷新左側(cè)菜單欄有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手