在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端的
切換手機端后刷新一下頁面。
?
