Vue Router 相關

時間 2019-11-10

標籤 vue router 相關简体版

原文原文鏈接

1. 路由傳參:

編程式的導航 router.pushhtml

this.$router.push("home");
this.$router.push({ name: 'news', params: { userId: 123 }}) // 傳遞
this.$route.params.userId   // 獲取
this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo}}) // 傳遞
this.$route.query.paicheNo  // 獲取

聲明式的導航同樣前端

<router-link 
     tag="li"  // 渲染爲 li標籤  默認是 a標籤
     :to="{name:'city',query:{id:item.id},params:{cityName:item.name}}">
        {{item.name}}
  </router-link>

總結 :
name方式能夠用 query 和 params
path方式只能用 query
命名路由搭配 params，刷新頁面參數會丟失
查詢參數搭配query，刷新頁面數據不會丟失**vue

2. 關於 hash 和 history 模式的區別

hash模式url帶#號兼容性好，history模式不帶#號是h5的新API
history模式的優點
- 沒有# url比較規範用戶看着舒服
- 咱們用vue 或者 react作的頁面分享到其餘的app中可是app中不容許 url 中帶有 #
- 注意 : history 不怕前進不怕後退怕刷新在訪問了二級頁面的時候作刷新操做就會出現 404 須要後端配置下 apache或者nginx的url重定向定向到咱們的首頁
history 模式的原理
- H5新推出的兩個神器：pushState與replaceState
- 做用就是將url替換且不刷新，比如掛羊頭賣狗肉，http並無去請求服務器該路徑下的資源，一旦刷新就會暴露這個實際不存在的「羊頭」，顯示404。
- 如何解決404弊端，這就須要服務器端作點手腳，將不存在的路徑請求重定向到入口文件（index.html)
hash 模式原理
- window是能夠監聽到哈希值的變化的（onhashchage事件），這就意味着：當url中的哈希值發生了變化，無需發起http請求，window也能夠監聽到這種變化，並按需加載前端的代碼塊
最後補充
- history 模式下 build以後在本地打開index.html是無效的 hash模式則能夠打開

3. 命名視圖

要實現同級展現多個視圖而不是嵌套的關係就須要命名視圖了

一個組件中準備了三個出口react

<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>

對於同一個路由一個視圖出口須要一個組件渲染三個出口就須要三個下邊是具體的配置注意 components (此時是要加s的)nginx
```
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})
```

4. 重定向

重定向也是經過routes 配置來完成的下邊的例子是從 /a 重定向到 /bapache
```
const router = new VueRouter({
  routes: [
    {path: '/a', redirect: '/b'}
  ]
})
```

重定向的目標也能夠是一個命名的路由編程

const router = new VueRouter({
  routes: [
    {path: '/a', redirect: {name: 'foo'}}
  ]
})

甚至是一個 function 動態的return從定向的目標後端

const router = new VueRouter({
  routes: [
    {path: '/a', redirect: to => {
      // 方法接收目標路由做爲參數
      // return 重定向餓 字符串路徑或路徑對象均可以
    }}
  ]
})

5. 別名

「重定向」的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，而後匹配路由爲 /b
「別名」的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，而後匹配路由爲 /a

const router = new VueRouter({
  routes: [
    {path: '/a', component: Foo, alias: '/b'}
  ]
})

6. 路由守衛

1. 完整的導航解析流程

導航被觸發了
在失活的組件中調用離開守衛 (beforeRouteLeave)
調用全局的 beforeEach 守衛
在重用的組件中調用 beforeRouterUpdate 守衛(2.2+)
在路由配置中調用 beforeEnter
解析異步路由組件
在被激活的組件裏調用 beforeRouterEnter
調用全局的 beforeResolve 守衛(2.5+)
導航被確認
調用全局的 afterEach 鉤子
觸發 DOM 更新
用建立好的實例調用 beforeRouterEnter 守衛中傳遞給 next 的回調函數服務器

2. 三種守衛(全局的守衛, 路由獨享的守衛, 組件內的守衛)的具體配置

全局前置守衛app

const router = new VueRouter({....})
router.beforEach((to, from, next) => {
  // to 即將進入的目標路由對象
  // from 當前導航正要離開的 路由對象
  // next 是一個 function 必需要調用一下 next()  
})

全局解析守衛

router.beforeResolve((to, from) => {
  // 
})

全局後置守衛

router.afterEach((to, from) => {
  // 此時沒有了 next 函數
})

路由獨享的守衛

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

      }
    }
  ]
})

組件內的守衛 (定義的位置和組件的生命週期平級)

const Foo = {
  template: `...`,

  beforeRouterEnter (to, from, next) {
    // 在組件的對應路由被 confirm 前調用
    // 不能獲取 組件的 this 由於當此守衛執行時 組件實例尚未建立   下方法能夠訪問組件實例  
    next(vm => {
      // 經過 vm 訪問組件的實例 
    })
  },

  beforeRouterUpdate (to, from, next) {
    // 當前路由改變 可是該組件被複用時 調用
    // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
    // 能夠訪問組件的 this
  },

  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 能夠訪問組件實例 `this`
  }
}