## 一、前端路由與后端路由 路由模塊的本質 就是建立起url和頁面之間的映射關系； ### **定義** 后端路由： 所有的URL地址都對應服務器上對應的資源； 前端路由： 對于單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，稱作前端路由（區別于后端路由）； ### **hash的特點** 1、HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現； 2、#代表網頁中的一個位置（錨點）； 3、HTTP請求不包含#及之后的字符，他們不會被發送到服務器端； 4、改變#不觸發網頁重載，不會向服務器發起重新請求； 5、改變#會改變瀏覽器的訪問歷史； ## 二、使用步驟 * 第一步: 創建路由組件； * 第二步: 配置路由映射: 組件和路徑映射關系； * 第三步: 使用路由: 通過router-link和router-view； ## 三、路由定義 路由定義對象，接受一個路由配置對象作為構造參數，其核心是路由匹配規則數組，數組中每條規則，包含的核心屬性： 1、path：就是上面提到的，hash后面的內容； 2、component：如果路由是前面匹配到的`path`，則展示`component`屬性對應的那個組件，必須是一個組件的模板對象， 不能是組件的引用名稱； ## 四、頁面用法 ### **路由展示** ``` <router-view></router-view> ``` router-view這是vue-router提供的元素，專門用來當作占位符的，按路由規則，匹配到的組件，就會展示到這個router-view中去； ### **路由跳轉** ``` <router-link to="/register">注冊</router-link> <router-link to="/login">登錄</router-link> ``` 路由頁面跳轉需要加`#`，不然就當于跳轉鏈接地址了，加了`#` 就定位到當前頁面，因為每次都寫`#`很麻煩，因此可以使用router-link，它默認渲染為一個`a`標簽(可通過tag屬性來指定其他渲染方式)，且會自動帶上#，如上面的router-link代碼等同于下面的代碼： ``` <a href="#/login">登錄</a> <a href="#/register">注冊</a> ``` ## 五、樹形路由（嵌套路由） 真實系統中，路由樹往往是樹形結構的路由（官方稱嵌套路由）跳轉，我們可以通過點擊或編程的方式跳轉到任意一級的路由； ``` var router = new VueRouter({ routes: [ { path: '/p1', component: account, children: [ { path: 'p11', component: login }, { path: 'p12', component: register } ] } ] }) ``` >[danger] 注意： > 1、最底層的路由path，要帶根路徑/，其各級子孫，都不能帶根路徑/； > 2、匹配路由的時候，從根開始逐級匹配，比如，/p1/p12這個路由，則就能匹配到login組件； > 3、path自身，隨便你怎么寫，只要能被用戶請求匹配得上； > 4、一般的，子路由里面的path，不要用/打頭，因為這樣會導致匹配不上； > 5、官方定義，通過children實現嵌套多級定義，定義的時候，也遵循嵌套定義path，那么，匹配的時候，也將通過嵌套逐級來匹配了； ## 六、編程導航 有時候，路由導航并不一定必須通過用戶點擊按鈕，或者是在做跳轉的時候，還需要做一些附加操作，這兩種情況，都需要使用編程的方式來導航（有點像傳統頁面的post提交，通過代碼來提交，而非點擊一個鏈接）； 編程導航用到的對象就是$router； 主要方法： * `this.$router.go`根據瀏覽器記錄 前進`1`后退`-1`； * `this.$router.push`(直接跳轉到某個頁面顯示) * `push`參數: 字符串`/xxx` * `push`參數:對象 :`{name:'xxx',query:{id:1},params:{name:2} }` * `this.$router.replace` * 跟`router.push`很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄； ## 七、參數傳遞 通過路由傳遞參數主要有兩種類型: params和query； ### **params的類型：** ``` this.$router.push({ name:'XXX' //配置文件中的name params:{ name:'yaoxx' } }) /XXX中接收參數代碼: this.$route.params.name; //ps：傳參用$router,但是接收用$route ``` 或 ``` <router-link :to="{name:'master', params:{count:100,type:obj}}"> ``` * 配置路由格式: /router/:id * 傳遞的方式: 在path后面跟上對應的值 * 傳遞后形成的路徑: /router/123, /router/abc ### **query的類型：** ``` this.$router.push({ path:'/XXX' query:{ name:'yaoxx' } }) /XXX中接收參數代碼: this.$route.query.name; //ps：傳參用$router,但是接收用$route ``` 或 ``` <router-link :to="{name:'master', query:{count:100,type:obj}}"> ``` * 配置路由格式: /router, 也就是普通配置 * 傳遞的方式: 對象中使用query的key作為傳遞方式 * 傳遞后形成的路徑: /router?id=123, /router?id=abc ## 七、動態路由 所謂的動態路由，是指路由規則定義，是動態路徑，含參數的，而不是靜態字符串； 例如： ~~~ const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ // 動態路徑參數 以冒號開頭 { path: '/user/:id', component: User } ] }) ~~~ 如上，像`/user/foo`和`/user/bar`都將映射到相同的路由，且參數值會被設置到`this.$route.params`，可以在每個組件內使用； ## 八、路由匹配 1、有時候，同一個路徑可以匹配多個路由，此時，匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高； 2、常規參數只會匹配被`/`分隔的 URL 片段中的字符。如果想匹配**任意路徑**，我們可以使用通配符 (`*`)；基于規則1，含有*通配符*的路由應該放在最后； ## 九、命名路由 定義路由規則的時候，除了path和component必選元素外，還有一個name屬性，如果定義了，則它就是命名路由； 命名路由定義意味著使用的時候，可以通過名稱來獲取，而非path匹配了； ## 十、命名視圖 定義路由規則的時候，除了path和component必選元素外，還有一個components屬性，如果定義了，則它就是命名視圖； 如果想要在一個路由中，展示多個視圖構成的頁面（例如，包含了側邊導航視圖和內容視圖兩部分的頁面），那么就要用命名視圖了； 例子： ~~~jsx <router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view> ~~~ ~~~cpp const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] }) ~~~ 注意： 1、如果 router-view 沒有設置名字（一般默認顯示的那個不設置名稱），那么默認為 default； 2、一個視圖使用一個組件渲染，因此對于同個路由，多個視圖就需要多個組件，也因此，定義的時候，用的是components； 3、設置了多個命名路由的時候，如果路由配置的時候，某個路由選項，只會渲染它已經根據命名配置了的視圖，如果沒有配置的，則不會渲染，例如上面的，如果只配置了一個default，那么a和b都不會被渲染； ## 十一、重定向 定義路由規則的時候，除了path和component必選元素外，還有一個redirect屬性，如果定義了，則它就是重定向； ~~~ const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' }, { path: '/c', redirect: { name: 'foo' }}//重定向的目標也可以是一個命名的路由 ] }) ~~~ “重定向”的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，然后匹配路由為 /b； 上面的例子，表明，通過/a匹配到當前路由的時候，它并不直接訪問組件，而是繼續重定向到/b，去匹配/b的路由； ### **別名** ~~~ const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] }) ~~~ 1、/a的別名是/b，意味著，當用戶訪問/b時，URL 會保持為/b，但是路由匹配則為/a，就像用戶訪問/a一樣； 2、“別名”的功能讓你可以自由地將 UI 結構映射到任意的 URL，而不是受限于配置的嵌套路由結構；