本次記錄基于iview3框架實(shí)現(xiàn)多級菜單+vue router實(shí)現(xiàn)頁面切換

在青山等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),成都營銷網(wǎng)站建設(shè),外貿(mào)網(wǎng)站制作,青山網(wǎng)站建設(shè)費(fèi)用合理。

方法一：

使用Tree 樹形控件，官方文檔

以官方demo為例，數(shù)據(jù)中添加URL屬性，用于路由跳轉(zhuǎn)，正式項(xiàng)目中該tree控件的數(shù)據(jù)由后端給出，需要注意的是后端給出的URL跳轉(zhuǎn)地址最前一定要看清有沒有"/" ，如果沒有自己手動(dòng)加或后端改，沒有這個(gè)"/" 斜杠會導(dǎo)致路由跳轉(zhuǎn)失敗。

思路：根據(jù)官方文檔里面寫用on-select-change事件返回當(dāng)前已選中的節(jié)點(diǎn)數(shù)組、當(dāng)前項(xiàng)，就利用返回的當(dāng)前項(xiàng)數(shù)據(jù)拿到URL，并使用router跳轉(zhuǎn)。

路由配置，這里子路由中的路徑要和后端給出的路由地址保持一致，才能正確跳轉(zhuǎn)

import Vue from 'vue'
import Router from 'vue-router'
import component1 from '@/components/component1'
import component2 from '@/components/component2'
import component3 from '@/components/component3'
import component4 from '@/components/component4'
import Index from '../view/Index'
 
Vue.use(Router)
 
export default new Router({
 routes: [
 {
  path: '/',
  name:'Index',
  component: Index,
  children:[
  {
   path: '/chpo/chpo/chpoShow',
   name:'component1',
   component: component1
  },
  {
   path: '/chpo/chpoCollection/chpocollectionshow',
   name:'component2',
   component: component2
  },
  {
   path: '/company/course/courseshow',
   name:'component3',
   component: component3
  },
  {
   path: '/system/sysgamutgame/gamutgameshow',
   name:'component4',
   component: component4
  },
  ]
 },
 
 ]
})

方法二：

使用Menu 導(dǎo)航菜單和遞歸來實(shí)現(xiàn)，組件官方文檔

思路：①根據(jù)官方文檔 MenuItem有 to和 target屬性，使用其一都能實(shí)現(xiàn)跳轉(zhuǎn)，但跳轉(zhuǎn)結(jié)果可能不一樣，這里使用to屬性跳轉(zhuǎn)

②在子組件內(nèi)進(jìn)行是否為最終子項(xiàng)，若不是則使用遞歸進(jìn)行再次循環(huán)，直到最終子項(xiàng)

子組件

在父組件中調(diào)用，使用v-for循環(huán)組件，傳入當(dāng)前item值即可，調(diào)用的代碼已經(jīng)在上面寫過，不在贅述。

在MenuItem上綁定屬性:to 跳轉(zhuǎn)的router路徑，即可實(shí)現(xiàn)頁面切換。

最后截圖展示效果：

方法一：使用tree樹形組件效果

方法二：Menu組件和遞歸使用效果

至此，兩種方法寫完了，自己學(xué)習(xí)記錄，僅供參考思路。

更多教程點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。