Vue路由器

如何使用Vue路由器,這是Vue應用程序的基本組成部分之一

介紹

在JavaScript Web應用程序中,路由器是將當前顯示的視圖與瀏覽器地址欄內容同步的部分。

換句話說,這是當您單擊頁面中的某些內容時更改URL的部分,並有助於在您單擊特定的URL時顯示正確的視圖。

傳統上,Web是圍繞URL構建的。當您單擊某個URL時,將顯示一個特定頁面。

隨著在瀏覽器中運行的應用程序的引入並改變了用戶的外觀,許多應用程序中斷了這種交互,您必須使用瀏覽器的History API手動更新URL。

當您需要將URL同步到應用程序中的視圖時,需要一個路由器。這是一個非常普遍的需求,現在所有主要的現代框架都允許您管理路由。

Vue路由器庫是Vue.js應用程序的一種選擇。 Vue不強制使用此庫。您可以使用任何所需的通用路由庫,也可以創建自己的History API集成,但是使用Vue Router的好處是它可以官方的

這意味著它由維護Vue的同一個人維護,因此您可以在框架中獲得更一致的集成,並保證無論將來如何,它始終是兼容的。

安裝

Vue路由器可通過以下途徑獲得npm包名為vue-router

如果您通過腳本標籤使用Vue,則可以通過以下方式添加Vue路由器:

<script src="https://unpkg.com/vue-router"></script>

unpkg.com是一個非常方便的工具,它通過簡單的鏈接就可以在瀏覽器中使用每個npm軟件包。

如果您使用Vue CLI,使用安裝

npm install vue-router

一旦安裝vue-router並使用腳本標籤或通過Vue CLI使它可用,您現在可以將其導入您的應用程序中。

您導入之後vue,然後您打電話Vue.use(VueRouter)安裝它在應用程序內:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

致電後Vue.use()傳遞路由器對象,在應用程序的任何組件中,您都可以訪問以下對象:

  • this.$router是路由器對象
  • this.$route是當前路線對象

路由器對象

路由器對象,使用this.$router在根Vue組件中安裝Vue路由器後,可以從任何組件中獲取任何功能。

我們可以使用以下方法使應用導航到新路線

  • this.$router.push()
  • this.$router.replace()
  • this.$router.go()

類似於pushStatereplaceStategoHistory API的方法。

push()用於轉到新路線,將新項目添加到瀏覽器歷史記錄中。replace()相同,只是它不會將新狀態推向歷史記錄。

用法樣本:

this.$router.push('about') //named route, see later
this.$router.push({ path: 'about' })
this.$router.push({ path: 'post', query: { post_slug: 'hello-world' } }) //using query parameters (post?post_slug=hello-world)
this.$router.replace({ path: 'about' })

go()來回移動,接受可以在歷史記錄中返回的正數或負數:

this.$router.go(-1) //go back 1 step
this.$router.go(1) //go forward 1 step

定義路線

我正在使用Vue單個文件組件在這個例子中。

在模板中,我使用nav tag that has 3 router-link組件,其標籤(首頁/登錄/關於)和通過to屬性。

router-view組件是Vue路由器將放置與當前URL匹配的內容的位置。

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/login">Login</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

一種router-link組件呈現一個a標籤為默認設置(您可以更改)。每次更改路線時(通過單擊鏈接或更改URL),router-link-active類會添加到引用活動路徑的元素中,從而可以設置其樣式。

In the JavaScript part we first include and install the router, then we define 3 路線組成

我們將它們傳遞給router對象,然後將此對像傳遞給Vue根實例。

這是代碼:

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: ‘<div>Home</div>’ }

const Login = { template: ‘<div>Login</div>’ }

const About = { template: ‘<div>About</div>’ }

const router = new VueRouter({ routes: [ { path: ‘/’, component: Home }, { path: ‘/login’, component: Login }, { path: ‘/about’, component: About } ] })

new Vue({ router }).$mount(’#app’) </script>

通常,在Vue應用程序中,您可以使用以下方法實例化並安裝根應用程序:

new Vue({
  render: h => h(App)
}).$mount('#app')

使用Vue路由器時,您不會通過render屬性,而是使用router

上例中使用的語法:

new Vue({
  router
}).$mount('#app')

是的簡寫

new Vue({
  router: router
}).$mount('#app')

在示例中看到,我們傳遞了一個routes數組到VueRouter構造函數。此陣列中的每條路線都有一個pathcomponent參數。

如果您通過name參數也一樣,你有一個命名路線

使用命名路由將參數傳遞到路由器的推入和替換方法

還記得我們以前如何使用Router對象推送新狀態嗎?

this.$router.push({ path: 'about' })

使用命名的路由,我們可以將參數傳遞給新的路由:

this.$router.push({ name: 'post', params: { post_slug: 'hello-world' } })

同樣的道理replace()

this.$router.replace({ name: 'post', params: { post_slug: 'hello-world' } })

該應用程序將呈現與傳遞給鏈接的URL匹配的路由組件。

實例化處理URL的新路由組件,並調用其防護措施,舊的路由組件將被銷毀。

路線守衛

自從我們提到守衛,讓我們對其進行介紹。

您可以將它們視為生命週期掛鉤或中間件,它們是在應用程序執行期間的特定時間調用的函數。您可以加入並更改路由的執行,重定向或取消請求。

您可以通過向beforeEach()afterEach()路由器的屬性。

  • beforeEach()在確認導航之前調用
  • beforeResolve()在執行beforeEach和所有組件時調用beforeRouterEnterbeforeRouteUpdate警衛人員被召喚,但在確認導航之前。最終檢查(如果需要)
  • afterEach()導航確認後調用

“導航已確認”是什麼意思?我們將在一秒鐘內看到它。同時,將其視為“應用程序可以走那條路”。

用法是:

this.$router.beforeEach((to, from, next) => {
  // ...
})
this.$router.afterEach((to, from) => {
  // ...
})

tofrom代表我們往返的路線對象。beforeEach有一個附加參數next如果我們打電話給false作為參數,將阻止導航並導致其未經確認。就像在Node中間件中一樣,如果您很熟悉,則應始終調用next(),否則執行將卡住。

單路徑組件還具有防護裝置:

  • beforeRouteEnter(from, to, next)在確認當前路線之前調用
  • beforeRouteUpdate(from, to, next)當路由更改但管理它的組件仍然相同時調用(使用動態路由,請參見下一個)
  • beforeRouteLeave(from, to, next)當我們離開這裡時被稱為

我們提到了導航。要確定是否確認導航到路線,Vue Router會執行一些檢查:

  • 它呼籲beforeRouteLeave保護當前組件
  • 它呼叫路由器beforeEach()警衛
  • 它稱beforeRouteUpdate()在任何需要重用的組件中(如果存在)
  • 它稱beforeEnter()保護路線對象(我沒有提到它,但您可以看一下這裡
  • 它稱beforeRouterEnter()在我們應該進入的組件中
  • 它呼叫路由器beforeResolve()警衛
  • 如果一切正常,導航已確認!
  • 它呼叫路由器afterEach()警衛

您可以使用特定於路線的防護(beforeRouteEnterbeforeRouteUpdate(如果是動態路由)作為生命週期掛鉤,那麼您可以開始數據獲取請求例如。

動態路由

上面的示例顯示了基於URL的不同視圖,該視圖處理了//login/about路線。

一個非常普遍的需求是處理動態路線,例如將所有帖子都放在/post/,每個都有一個sl名:

  • /post/first
  • /post/another-post
  • /post/hello-world

您可以使用動態細分來實現。

這些是靜態段:

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '/about', component: About }
  ]
})

我們添加了一個動態細分來處理博客文章:

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/post/:post_slug', component: Post },
    { path: '/login', component: Login },
    { path: '/about', component: About }
  ]
})

注意:post_slug句法。這意味著您可以使用任何字符串,並將其映射到post_slug佔位符。

您不僅限於這種語法。 Vue依賴這個圖書館解析動態路線,常用表達

現在,在“發布路線”組件內,我們可以使用$route,而帖子使用$route.params.post_slug

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
}

我們可以使用此參數從後端加載內容。

在相同的URL中,可以有任意數量的動態細分:

/post/:author/:post_slug

還記得我們之前談到用戶導航到新路線時會發生什麼情況嗎?

在動態路線的情況下,發生的情況略有不同。

Vue可以重用當前實例,而不是銷毀當前路由組件並重新實例化,從而更加高效。

發生這種情況時,Vue會呼叫beforeRouteUpdate生命週期事件。在那裡,您可以執行所需的任何操作:

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
  beforeRouteUpdate(to, from, next) {
    console.log(`Updating slug from ${from} to ${to}`)
    next() //make sure you always call next()
  }
}

使用道具

在示例中,我使用了$route.params.*訪問路線數據。組件不應與路由器緊密耦合,相反,我們可以使用道具:

const Post = {
  props: ['post_slug'],
  template: '<div>Post: {{ post_slug }}</div>'
}

const router = new VueRouter({ routes: [ { path: ‘/post/:post_slug’, component: Post, props: true } ] })

注意props: true傳遞給route對像以啟用此功能。

嵌套路線

在我提到之前,您可以在同一URL中具有任意數量的動態細分,例如:

/post/:author/:post_slug

因此,假設我們有一個Author組件負責第一個動態段:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script> import Vue from ‘vue’ import VueRouter from ‘vue-router’

Vue.use(VueRouter)

const Author = { template: ‘<div>Author: {{ $route.params.author}}</div>’ }

const router = new VueRouter({ routes: [ { path: ‘/post/:author’, component: Author } ] })

new Vue({ router }).$mount(’#app’) </script>

我們可以插入第二個router-viewAuthor模板中的組件實例:

const Author  = {
  template: '<div>Author: {{ $route.params.author}}<router-view></router-view></div>'
}

我們添加了Post組件:

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
}

然後將內部動態路由注入VueRouter配置中:

const router = new VueRouter({
  routes: [{
    path: '/post/:author',
    component: Author,
    children: [
      path: ':post_slug',
      component: Post
    ]
  }]
})

免費下載我的Vue手冊


更多vue教程: