创建vue项目(三)路由跳转、反向代理、本地存储、状态管理
數據更新渲染，axios請求數據，配置環境
一、路由跳轉
.router-link-active
在路由下添加 children 數組，繼續寫路由，需要注意的是 children 中的 path 不要加 " / "。為了讓地址為 /workOrder 是有頁面效果，需要重定向到指定的頁面，用 redirect 重新定向。
表格中的路由跳轉
二、反向代理
代碼：
使用：
axios請求的路徑中的 /api ，即 proxy 下的 ‘/api’ 代表的是在 vue.config.js 中配置的 http://AA.BB.CC.DD:端口號//connect;
axios全局配置 - 簡書
https://www.jianshu.com/p/0da733d7a8df
（1） npm install axios
（2）cnpm install axios --save-dev
（3）main.js 引入
關于vue跨域問題，修改代理后仍出現404
(1) “重新運行cnpm run dev”,
(2) “測試接口是否能夠正常訪問”
vue在哪個生命周期進行數據請求
（1）一般在 created（或beforeRouter） 里面就可以，如果涉及到需要頁面加載完成之后的話就用 mounted；
（2）在created的時候，視圖中的html并沒有渲染出來，所以此時如果直接去操作html的dom節點，一定找不到相關的元素
而在mounted中，由于此時html已經渲染出來了，所以可以直接操作dom節點，（此時document.getelementById 即可生效了）。
beforeCreate 創建之前：已經完成了 初始化事件和生命周期
created 創建完成：已經完成了 初始化注冊和響應
beforeMount 掛載之前：已經完成了模板渲染
mounted :掛載之后：已完成HTML虛擬化，創建了el節點 可以操作DOM了
beforeDestroy ：摧毀之前：整個vue都處在實時監控空渲染和更新
destroyed: 已摧毀，已經摧毀了觀察者，子元素和事件監聽
created:在模板渲染成html前調用，即通常初始化某些屬性值，然后再渲染成視圖。
mounted:在模板渲染成html后調用，通常是初始化頁面完成后，再對html的dom節點進行一些需要的操作。
掛載到節點上的初始化方法通常用mounted去操作，主動調起的用methods里面封裝方法。
數據初始化一般放到created里面，這樣可以及早發請求獲取數據，如果有依賴dom必須存在的情況，就放到mounted(){this.$nextTick(() => { /* code */ })}里面
Vue是異步執行dom更新的，一旦觀察到數據變化，Vue就會開啟一個隊列，然后把在同一個事件循環 (event loop) 當中觀察到數據變化的 watcher 推送進這個隊列。如果這個watcher被觸發多次，只會被推送到隊列一次。這種緩沖行為可以有效的去掉重復數據造成的不必要的計算和DOm操作。而在下一個事件循環時，Vue會清空隊列，并進行必要的DOM更新。
調用的時機：
created:在模板渲染成html前調用.
mounted:在模板渲染成html后調用
created: 數據的初始化，異步請求也適宜在這里調用。
mounted: 通常是初始化頁面完成后，再對html的dom節點進行一些需要的操作
三、本地存儲
對于不怎么發生變化的數據，可以使用本地存儲，減少請求次數。
注意： 存儲時，若為數組，要對數據類型進行轉換。
四、狀態管理
對于復雜組件之間的通訊，可以使用狀態管理。為了方便以后的擴展，所采用的方式與路由類似。
index.js的代碼：
還可以做一些簡單的邏輯處理
2. 然后在 stores 文件下的子 index.js 中注冊
import 名稱 from '文件路徑'; exportdefault new Vuex.Store({ //新增一個modulesmodules : {名稱} });3. 使用：
（1） html中使用： {{$store.state.city.nm}}
（2） 方法中：
4. 注意：
(1) window.localStorage.setItem() 不僅可以創建賦值，還可以設置重新賦值；
查看：
(2) 若存儲的數據只有一條時，注意后面不需要加 .字段名
5. 監聽vuex的變化
總結
以上是生活随笔為你收集整理的创建vue项目(三)路由跳转、反向代理、本地存储、状态管理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 创建vue项目(二)引入elementU
- 下一篇： html5倒计时秒杀怎么做,vue 设