Vue-router路由系統介紹

路由原理

• 傳統開發方式 url改變後 馬上發起請求，響應整個頁面，渲染整個頁面

• SPA 錨點值改變後 不會發起請求,發起ajax請求,局部改變頁面數據

  • 頁面不跳轉 用戶體驗更好

SPA

• single page application(單頁應用程序)

• 前端路由

  • 錨點值監視
  • ajax獲取動態數據
  • 核心點是錨點值
• 前端框架 Vue/angular/react都很適合開發單頁應用

基本使用

• vue-router
• 其是vue的核心插件
• 1:下載 npm i vue-router -S
• 1.5(重要):安裝插件Vue.use(VueRouter);
• 2:在main.js中引入vue-router對象 import VueRouter form './x.js';
• 3:建立路由對象 var router = new VueRouter();

• 4:配置路由規則 router.addRoutes([路由對象]);

  • 路由對象{path:'錨點值',component:要(填坑)顯示的組件}

• 5:將配置好的路由對象交給Vue

  • 在options中傳遞-> key叫作 router
• 6:留坑(使用組件) <router-view></router-view>

router-link

• to<router-link to="/xxx/x">點我</router-link>
• 幫助咱們生成a標籤的href

• 錨點值代碼維護不方便，若是須要改變錨點值名稱

  • 則須要改變 [使用次數 + 1（配置規則）] 個地方的代碼

命名路由

• 1:給路由對象一個名稱 { name:'home',path:'/home',component:Home}

• 2:在router-link的to屬性中描述這個規則

  • <router-link :to="{name:'home'}></router-link>"
  • 經過名稱找路由對象，獲取其path，生成本身的href
• 大大下降維護成本，錨點值改變只用在main.js中改變path屬性便可

參數router-link,

• Vue.prototype.xxx = {add:fn}
• 全部組件中，使用this.xxx就能拿到這個對象

• 查詢字符串

  • 1:配置:to="{name:'detail',query:{id:hero.id} }"
  • 2:規則 {name:'detail',path:'/detail',component:Detail}
  • 3:獲取 this.$route.query.id
  • 4:生成 <a href="/detail?id=1">

• path方式

  • 4:生成 <a href="/detail/1">
  • 1:配置 :to="{name:'detail',params:{id:hero.id} }"
  • 2:規則 { name:'detail',path:'/detail/:id'}
  • 3:獲取 this.$route.params.id

• 查詢字符串配置參數

  • router-link一次
  • 獲取的時候一次

• path方式配置參數

  • router-link一次
  • 規則配置的時候聲明位置
  • 獲取的時候一次

• 總結書寫代碼注意事項

  • path方式須要在路由規則中聲明位置

別名

/a的別名是/b，意味着當用戶訪問/b時，URL會保持爲/b，可是路由匹配則爲/a，就像用戶訪問/a同樣。

{ path: '/a', component: A, alias: '/b' }

重定向

// 方式一：字符串路徑path
{ path: '/a', redirect: '/b' }
// 方式二：name
{ path: '/a', redirect: {name: 'b'} }
// 方式三：動態返回重定向目標
{ path: '/a', redirect: to => {
  // 方法接收 目標路由 做爲參數；return 重定向的 字符串路徑/路徑對象 
}}

階段總結

• vue-router使用步驟 : 1:引入 2:安裝插件 3:建立路由實例 4:配置路由規則 5:將路由對象關聯vue 6:留坑

• router-link to="/xxx" 命名路由

  • 1. 在路由規則對象中 加入name屬性
    2. 在router-link中 :to="{ name:"xxx'} "
• $route 路由信息對象,只讀對象
• $router 路由操做對象,只寫對象

• 下圖來自vue-router源碼

  • 1. Vue.use(插件對象); // 過程當中會註冊一些全局組件,及給vm或者組件對象掛在屬性
    2. 給vm及組件對象掛在的方式 : Object.defineProperty(Vue.prototype,'$router',{

       ​ get:function () {
       ​ return 本身的router對象;

       ​ }

       })

嵌套路由

須要根據錨點值的改變，僅僅變化上圖中的Profile到Posts組件，便可使用嵌套路由

• 代碼思想

  • 1:router-view的細分

    • router-view第一層中，包含一個router-view
  • 2:每個坑挖好了，要對應單獨的組件
• 使用須知: 1:router-view包含router-view 2:路由children路由

路由守衛

它其實就是一個路由改變的事件回調函數

• 全局路由守衛

  • 前置router.beforeEach((to, from,next) => {})
  • 後置router.afterEach((to, from) => {})

• 路由獨享的守衛

  • const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) =>{
            // ...
          }
        }
      ]
    })

• 組件內的守衛

  • const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染該組件的對應路由被 confirm 前調用
        // 不！能！獲取組件實例 `this`
        // 由於當守衛執行前，組件實例還沒被建立
        // 可是，能夠這樣用
          next(vm => {
            // 經過 `vm` 訪問組件實例-> 將來的組件this
              vm.msg = '數據在此';
          })
      },
      beforeRouteUpdate (to, from, next) {
        // 觸發條件見下文
        // 能夠訪問組件實例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 導航離開該組件的對應路由時調用
        // 能夠訪問組件實例 `this`
      }
    }

  • beforeRouteUpdate的觸發條件(動態路由參數變化時)

    • 1:路由配置

    • {path:"/xxx/:id"}

    • 2:router-link

    • <router-link to="/xxx/1"

    • <router-link to="/xxx/2"

• next

  • 放行next();
  • 取消本次導航（url恢復成點擊前的）next(false)

  • 重定向

    • next('/xxx')
      // 或者
      next({name:'路由對象的name屬性'});

• to||from

  • 該對象中的.fullPath屬性比較經常使用，也就是當前的url

守衛meta屬性的應用

• 路由meta元數據 -> meta是對於路由規則是否須要驗證權限的配置

  • 路由對象中 和name屬性同級 { meta:{ isChecked:true } }

• 路由鉤子 -> 權限控制的函數執行時期

  • 每次路由匹配後, 渲染組件到router-view以前

  • router.beforeEach(function(to,from,next) {  
        // 判斷to或from的fullPath便可
    } )

編程導航

• 1: 跳到指定的錨點,並顯示頁面 this.$router.push({ name:'xxx',query:{id:1},params:{name:'abc'} });
• 2: 配置規則 {name:'xxx',path:'/xxx/:name'}

• 3: 根據歷史記錄.前進或後退

  • this.$router.go(-1|1);
  • 1表明進一步,-1是退一步

過渡效果及緩存

咱們須要在路由改變時變化頁面，ok！同時咱們但願加上一些淡入淡出等效果，就能夠用上transition內置組件

另外,考慮到緩存問題，就加上keep-alive組件結合使用

所以，你看到是這樣的

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

transition及keep-alive詳情參考