認識vue-router

你什麼都不懂發表於2018-08-31
Vue

什麼是路由

對於使用者來說，路由就是瀏覽器位址列中的url與所見網頁的對應關係。訪問一個地址,便會執行相應的頁面.

對於web開發人員來說，路由更像是url與處理函式的對應關係。

前端路由

前端路由的出現基本上等於把整個前臺都交給了前端來處理,通過檢測url的變化,展示不同的頁面給使用者,跳轉頁面的過程可以做到無重新整理,減少了伺服器對於過多請求承擔的壓力. 更新檢視但不重新請求頁面”是前端路由原理的核心之一，目前在瀏覽器環境中這一功能的實現主要有兩種方式：

利用URL中的hash（“#”）

利用History interface在 HTML5中新增的方法

前端路由的實現

比較常見的實現方式包括:

1.hash路由

hash路由一個明顯的標誌是帶有#,我們主要是通過監聽url中的hash變化來進行路由跳轉。 hash的優勢就是相容性更好,在老版IE中都有執行. 並且不需要在伺服器端做任何修改. 很多框架的路由就是基於hash實現的.

2.history

HTML5中history物件上新的API，同樣能實現前端的路由。通過pushState()方法或replaceState()方法可以修改url的地址，並在popstate事件中能監聽地址的改變，不同的是，手動的進行pushState()並不會觸發popstate事件。

兩種方式對比，基於Hash的路由，相容性更好；基於History API的路由，則更正式，可以設定與當前URL同源的任意URL，路徑更直觀。另外，基於Hash的路由不需要對伺服器做改動，基於History API的路由需要對伺服器做一些改造，配置不同的路由都返回相同的頁面。

vue-router 中路由的實現方式

在vue-router中,一個最基本的路由包含以下配置:

var routers = [
  {
    path: 'tab1',
    component: {
      template: `<h1>首頁</h1>`
    },
  },
  {
    path: 'about',
    component: {
      template: `<div><span>hello</span></div>`
    },
  },
]

var router = new VueRouter({
  routers
})

new Vue({
  el: '#app',
  router: router
})
複製程式碼

vue-router中配置路由的知識點

設定路由的跳轉方式，無論是哪種模式改變路由都不會重新載入頁面,

mode 表示路由的配置模式:兩種

  • hash 模式（預設）:使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新載入。（在當前頁面的 url 後面加上路徑 ）
  • history 模式: 通過history 完成 URL 跳轉。（當前目錄底下的路徑跳轉）
//建立路由例項 const router = new VueRouter({
mode: 'history',//跳轉頁面
routes
})
複製程式碼

動態路由匹配

有時候我們需要我們的url變成動態的,比如url後面跟隨使用者的id,這種情況我們需要在配置中寫入:

{ path: '/user/:id', component: User }

路徑後面 + :表示這裡的引數是動態獲取的,這裡如何獲取到引數的,如下

<router-link to="/user/李栓蛋">李栓蛋</router-link> user/後面的值都會被path:'user/:id獲取到

template:<div>我叫{{$route.params.id}}</div>//我叫李栓蛋

巢狀路由

路由可以有多層構成,也就是一個元件的路由中巢狀另一個元件(路由套路由),寫法一樣,只不過是巢狀在元件裡面.

{

path::"/home",

component: home,

children:[

     {  path:"/user",  component:user } 

  ]

} 
複製程式碼

巢狀路由適用於url的引數是動態獲取的場景.因為這種情況下的路徑不能寫為固定值.

命名路由

{

path: "/user/:id",

name:user,

component:"user",

component:user

}

<router-link   to = "user/25">  user </router-link>

<router-link  :to = { name：＂user＂, params :{ id : 25 }}>  user </router-link>

／／ 當使用物件作為路由的時候，to前面要加一個冒號,表示繫結

複製程式碼

命名檢視

建立一個佈局，有 sidebar (側導航) 和 main (主內容) 兩個檢視，這個時候命名檢視就派上用場了。

<router-link to="/">/</router-link>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
複製程式碼
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: { //components是複數
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})
複製程式碼

在<router-view>中新增name,當匹配到路由的時候便會顯示對應的檢視,沒有匹配到的則不顯示.

導航衛士

正如其名，vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全域性的, 單個路由獨享的, 或者元件級的。

前置守衛

const router= new VueRouter({...})
router.beforeEach((to,form,next)=>{
  next()
})
複製程式碼

每個守衛方法接收三個引數：

  • to: Route: 即將要進入的目標 路由物件

  • from: Route: 當前導航正要離開的路由.

  • next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。

後置守衛

router.afterEach((to,form)=>{
  ...
})
複製程式碼

與前面對應的,後置守衛是在路由訪問之後要執行的操作,另外,後置守衛沒有next引數

路由獨享的守衛,使用beforeEnter

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

相關文章