在c盤創建一個iview-router的項目


、
然后使用默認的配置







跳過


添加vue-router的插件




編譯我們的文件。

編譯好之后，我們啟動App

默認的頁面就打開了。

默認兩個路由一個是about界面一個是home

我們使用編輯器打開代碼，用我們的iview的menu組件替換掉這兩個路由
在Router這個js文件內已經配置好了這兩個路由

分別對應了這兩個組件

App.vue里面看到菜單是用router-link來渲染的。Router-link在渲染完成之后，會變成一個a標簽。

我們把他替換成iview的menu組件
Menu標簽里面嵌套MenuItem元素

查看效果：

On-select跳轉

增加按鈕的跳轉事件

handleSelect會拿到當前菜單的name值


使用vue-router的編程式導航來跳轉、

About界面

Home界面：


Iview3.0中增加的新的寫法，可以大幅度的簡化跳轉的過程


我們直接使用to屬性，

實現了同樣的效果



之前的代碼生成的是一個普通的li標簽

Target屬性：


Menu的api
https://www.iviewui.com/components/menu#API

Replace屬性

再點擊about鏈接

Replace沒有保存歷史記錄的

頁面會直接在新的tab頁面打開，相當于a標簽的target=”_blank”

根據當前路由自動選中對應的菜單

菜單當前是about頁面。菜單是沒有高亮的。、

為了使菜單高亮，我們還是需要給item加上name屬性
Name僅僅作為這個菜單項的一個標識。

頁面效果

當用戶刷新頁面的時候，這個并沒有高亮。只有用戶點擊過菜單才會高亮

這就是我們要講的根據當前路由自動選中當前菜單項
Active-name默認選中的菜單

刷新頁面依然選中了

我們要動態的根據路由去選擇對應的菜單

也就是我們動態的去設置active-name的值了、

我們在頁面渲染完之后，把路由打印出來。

當我點擊了about路由的時候，。About.vue里面并沒有，輸出console當前的路由

通過一個watch來兼容路由的變化

根據不同平臺動態路由不同組件

判斷當前是pc電腦還是移動端的手機，顯示不同的內容 ，又同時保持同一個路由路徑。
在路由級別渲染不同的組件的方法
使用isMobile變量來判斷

然后我們在login的路由配置里面， 加上這個路徑，如果是手機的話就有mobile的路徑，如果不是就是空的

在views下面新建一個mobile的文件夾，在mobile文件夾下面新加一個login.vue.這個就是我們移動端要看的文件。


默認是pc端的

切換手機端后刷新一下頁面。


?

轉載于:https://www.cnblogs.com/wangjunwei/p/11195589.html

總結

以上是生活随笔為你收集整理的iView 实战系列教程(21课时)_2.iView 实战教程之导航、路由、鉴权篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。