vue(六)之路由導航守衛

原創

2020-06-19 02:07

Vue CLI2詳解

package.json文件中dependencies是運行時依賴，devDependencies是開發時依賴
** vue程序運行過程：template->ast->render->virtual dom->真實dom**
runtime-compiler的運行過程：template->ast->render->virtual dom->真實dom
runtime-only的運行過程:render->virtual dom->真實dom。所以這種方式更快，性能更高，同時代碼量也更少
runtime-only的情況下.vue文件中的template是由vue-template-compiler進行處理的

main.js中的render的原理

被傳入的組件

vue-cli3與2的區別

箭頭函數類似於java8lambda表達式

定義函數的方式一

定義函數的方式二

將方式一函數改爲箭頭函數

兩個參數的情形

一個參數的時候小括號可以省略

函數塊內多行代碼的情形

函數塊內只有一行代碼可以進行簡寫

後端路由

前端路由

spa: single page application web

通過hash改變url

url的history

replaceState相對於pushState的區別：不能前進後退

vue-router

具體代碼實現

第三步將router對象傳入vue實例裏面
先導出

然後再在vue導入引用，導入的時候是默認去找文件夾中的index.js文件

使用vue-router

router-link用於鏈接到某個地址，最終會被渲染爲一個a標籤，router-view將對應的組件渲染到也頁面的相應位置

設置路由的默認路徑

路勁訪問的時候的默認是hash模式，此模式下路徑中可能會存在#號，所以可以改爲history即可解決,在router中將mode設置爲history即可

router-link的其他屬性

代碼實現

在每個router-link設置active-class屬性比較麻煩，可以直接在router中設置linkActiveClass:'active’就能爲每一個router-link設置上active-class屬性了

通過代碼跳轉路由：主要是通過vue組件自帶的$router屬性，有replace和push兩個方法

動態路由

一:在router的path結尾加上:和一個變量名

二：在跳轉處拼接上對應abc的值

三：還可以通過$route獲得對應的值

$router與 $route的區別： $router是獲取所有的router， $route是獲取當前被激活的router

通過 UglifyJsPlugin對打包的js文件進行醜化

路由懶加載的效果

使用懶加載後，打包成的業務js文件就會因爲懶加載組件的數量而產生相應的改變

實現懶加載

具體的代碼實現

路由嵌套

子路由不加’/'

通過router-view將子組件添加到父頁中

參數的傳遞

代碼實現：在query中填入對象屬性

然後就會出現在地址的後面

然後再通過$route取出來

使用query以代碼的方式跳轉頁面

導航守衛具體案例

前置守衛(guard)beforeEach,路由跳轉之前調用：其中next()必須寫上

其中的meta.title是在路由裏面寫入的

後置鉤子(hook)afterEach，路由跳轉之後調用

還有一些路由獨享的守衛，具體可以查看vue-router的官網

路由獨享的守衛例子，beforeEnter