Bộ định tuyến Vue

Cách sử dụng Vue Router, một trong những phần thiết yếu của ứng dụng Vue

Giới thiệu

Trong ứng dụng web JavaScript, bộ định tuyến là phần đồng bộ hóa chế độ xem hiện đang hiển thị với nội dung thanh địa chỉ của trình duyệt.

Nói cách khác, đó là phần làm cho URL thay đổi khi bạn nhấp vào thứ gì đó trong trang và giúp hiển thị chế độ xem chính xác khi bạn nhấn vào một URL cụ thể.

Theo truyền thống, Web được xây dựng dựa trên các URL. Khi bạn nhấn vào một URL nhất định, một trang cụ thể sẽ được hiển thị.

Với sự ra đời của các ứng dụng chạy bên trong trình duyệt và thay đổi những gì người dùng nhìn thấy, nhiều ứng dụng đã phá vỡ sự tương tác này và bạn phải cập nhật URL theo cách thủ công bằng API Lịch sử của trình duyệt.

Bạn cần một bộ định tuyến khi cần đồng bộ hóa URL với các chế độ xem trong ứng dụng của mình. Đó là một nhu cầu rất phổ biến và tất cả các khuôn khổ hiện đại chính hiện nay đều cho phép bạn quản lý việc định tuyến.

Thư viện Vue Router là cách để đi cho các ứng dụng Vue.js. Vue không thực thi việc sử dụng thư viện này. Bạn có thể sử dụng bất kỳ thư viện định tuyến chung nào bạn muốn hoặc cũng có thể tạo tích hợp API Lịch sử của riêng bạn, nhưng lợi ích của việc sử dụng Bộ định tuyến Vue là nóchính thức.

Điều này có nghĩa là nó được duy trì bởi chính những người duy trì Vue, vì vậy bạn có được sự tích hợp nhất quán hơn trong khuôn khổ và đảm bảo rằng nó sẽ luôn tương thích trong tương lai, bất kể điều gì.

Cài đặt

Bộ định tuyến Vue có sẵn quanpmvới gói có tênvue-router.

Nếu bạn sử dụng Vue thông qua thẻ script, bạn có thể bao gồm Vue Router bằng cách sử dụng

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

unkg.com là một công cụ rất tiện dụng giúp mọi gói npm có sẵn trong trình duyệt bằng một liên kết đơn giản

Nếu bạn sử dụngVue CLI, cài đặt nó bằng cách sử dụng

npm install vue-router

Sau khi bạn cài đặtvue-routervà cung cấp nó bằng cách sử dụng thẻ script hoặc thông qua Vue CLI, giờ đây bạn có thể nhập nó vào ứng dụng của mình.

Bạn nhập nó sauvue, và bạn gọiVue.use(VueRouter)đếnTải vềnó bên trong ứng dụng:

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

Vue.use(VueRouter)

Sau khi bạn gọiVue.use()chuyển đối tượng bộ định tuyến, trong bất kỳ thành phần nào của ứng dụng mà bạn có quyền truy cập vào các đối tượng này:

  • this.$routerlà đối tượng bộ định tuyến
  • this.$routelà đối tượng tuyến đường hiện tại

Đối tượng bộ định tuyến

Đối tượng bộ định tuyến, được truy cập bằngthis.$routertừ bất kỳ thành phần nào khi Vue Router được cài đặt trong thành phần Vue gốc, cung cấp nhiều tính năng hay.

Chúng tôi có thể làm cho ứng dụng điều hướng đến một tuyến đường mới bằng cách sử dụng

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

giống vớipushState,replaceStategocác phương pháp của API Lịch sử.

push()được sử dụng để đi đến một tuyến đường mới, thêm một mục mới vào lịch sử trình duyệt.replace()giống nhau, ngoại trừ nó không đẩy một trạng thái mới vào lịch sử.

Mẫu sử dụng:

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()quay đi quay lại, chấp nhận một số có thể dương hoặc âm để quay ngược lại lịch sử:

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

Xác định các tuyến đường

Tôi đang sử dụng mộtThành phần tệp đơn Vuetrong ví dụ này.

Trong mẫu tôi sử dụngnav tag that has 3 router-linkcác thành phần có nhãn (Trang chủ / Đăng nhập / Giới thiệu) và một URL được chỉ định thông quatothuộc tính.

Cácrouter-viewcomponent là nơi Vue Router sẽ đưa nội dung phù hợp với URL hiện tại.

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

Arouter-linkthành phần kết xuất mộtatheo mặc định (bạn có thể thay đổi điều đó). Mỗi khi tuyến đường thay đổi, bằng cách nhấp vào liên kết hoặc bằng cách thay đổi URL,router-link-activelớp được thêm vào phần tử tham chiếu đến tuyến đang hoạt động, cho phép bạn tạo kiểu cho nó.

In the JavaScript part we first include and install the router, then we define 3 thành phần tuyến đường.

Chúng tôi chuyển chúng để khởi tạorouterđối tượng, và chúng tôi chuyển đối tượng này đến thể hiện gốc Vue.

Đây là mã:

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

Thông thường, trong ứng dụng Vue, bạn khởi tạo và gắn kết ứng dụng gốc bằng cách sử dụng:

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

Khi sử dụng Bộ định tuyến Vue, bạn không vượt quarendertài sản nhưng thay vào đó, bạn sử dụngrouter.

Cú pháp được sử dụng trong ví dụ trên:

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

là cách viết tắt của

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

Xem trong ví dụ, chúng tôi vượt qua mộtroutesmảng đếnVueRouterconstructor. Mỗi tuyến đường trong mảng này có mộtpathcomponentparams.

Nếu bạn vượt qua mộtnameparam cũng vậy, bạn có mộttuyến đường được đặt tên.

Sử dụng các tuyến đường được đặt tên để chuyển các tham số đến các phương thức đẩy và thay thế bộ định tuyến

Hãy nhớ cách chúng ta đã sử dụng đối tượng Router để đẩy một trạng thái mới trước đây?

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

Với một tuyến đường đã đặt tên, chúng ta có thể chuyển các tham số cho tuyến đường mới:

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

tương tự đối vớireplace():

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

Ứng dụng sẽ hiển thị thành phần tuyến đường khớp với URL được chuyển đến liên kết.

Thành phần tuyến đường mới xử lý URL được khởi tạo và các bộ phận bảo vệ của nó được gọi, và thành phần tuyến đường cũ sẽ bị hủy.

Bảo vệ tuyến đường

Kể từ khi chúng tôi đề cậplính canh, hãy giới thiệu chúng.

Bạn có thể nghĩ về chúng như các móc vòng đời hoặc phần mềm trung gian, đó là những chức năng được gọi vào những thời điểm cụ thể trong quá trình thực thi ứng dụng. Bạn có thể tham gia và thay đổi việc thực hiện một tuyến đường, chuyển hướng hoặc hủy bỏ yêu cầu.

Bạn có thể có những người bảo vệ toàn cầu bằng cách thêm một cuộc gọi lại vàobeforeEach()afterEach()tài sản của bộ định tuyến.

  • beforeEach()được gọi trước khi điều hướng được xác nhận
  • beforeResolve()được gọi khi beforeEach được thực thi và tất cả các thành phầnbeforeRouterEnterbeforeRouteUpdatelính canh được gọi, nhưng trước khi việc điều hướng được xác nhận. Kiểm tra cuối cùng, nếu bạn muốn
  • afterEach()được gọi sau khi điều hướng được xác nhận

“Điều hướng được xác nhận” nghĩa là gì? Chúng ta sẽ thấy nó sau một giây. Trong khi chờ đợi, hãy nghĩ về nó như là “ứng dụng có thể đi đến tuyến đường đó”.

Cách sử dụng là:

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

tofromđại diện cho các đối tượng tuyến đường mà chúng ta đến và đi.beforeEachcó một tham số bổ sungnextmà nếu chúng tôi gọi bằngfalselà tham số, sẽ chặn điều hướng và khiến nó không được xác nhận. Giống như trong phần mềm trung gian Node, nếu bạn đã quen thuộc, thì next () phải luôn được gọi, nếu không việc thực thi sẽ gặp khó khăn.

Các thành phần tuyến đơn cũng có các bảo vệ:

  • beforeRouteEnter(from, to, next)được gọi trước khi tuyến đường hiện tại được xác nhận
  • beforeRouteUpdate(from, to, next)được gọi khi tuyến thay đổi nhưng thành phần quản lý nó vẫn như cũ (với định tuyến động, xem tiếp theo)
  • beforeRouteLeave(from, to, next)được gọi khi chúng tôi rời khỏi đây

Chúng tôi đã đề cập đến điều hướng. Để xác định xem việc điều hướng đến một tuyến đường có được xác nhận hay không, Vue Router thực hiện một số kiểm tra:

  • Nó gọibeforeRouteLeavebảo vệ trong (các) thành phần hiện tại
  • nó gọi bộ định tuyếnbeforeEach()bảo vệ
  • nó gọi làbeforeRouteUpdate()trong bất kỳ thành phần nào cần được sử dụng lại, nếu có
  • nó gọi làbeforeEnter()bảo vệ đối tượng tuyến đường (tôi không đề cập đến nó nhưng bạn có thể xemđây)
  • nó gọi làbeforeRouterEnter()trong thành phần mà chúng ta nên nhập vào
  • nó gọi bộ định tuyếnbeforeResolve()bảo vệ
  • nếu tất cả đều ổn, điều hướng đã được xác nhận!
  • nó gọi bộ định tuyếnafterEach()bảo vệ

Bạn có thể sử dụng các vệ sĩ theo tuyến đường cụ thể (beforeRouteEnterbeforeRouteUpdatetrong trường hợp định tuyến động) như móc vòng đời, vì vậy bạn có thể bắt đầuyêu cầu tìm nạp dữ liệuví dụ.

Định tuyến động

Ví dụ trên cho thấy một chế độ xem khác dựa trên URL, xử lý/,/login/aboutcác tuyến đường.

Một nhu cầu rất phổ biến là xử lý các tuyến đường động, chẳng hạn như có tất cả các bài đăng dưới/post/, mỗi tên slug:

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

Bạn có thể đạt được điều này bằng cách sử dụng một phân đoạn động.

Đó là những phân đoạn tĩnh:

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

chúng tôi thêm vào một phân đoạn động để xử lý các bài đăng trên blog:

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

Chú ý:post_slugcú pháp. Điều này có nghĩa là bạn có thể sử dụng bất kỳ chuỗi nào và chuỗi đó sẽ được ánh xạ tớipost_slugtrình giữ chỗ.

Bạn không bị giới hạn ở loại cú pháp này. Vue dựa vàothư viện nàyđể phân tích cú pháp các tuyến đường động và bạn có thể sử dụngBiểu thức chính quy.

Bây giờ bên trong thành phần Tuyến đường đăng, chúng ta có thể tham chiếu tuyến đường bằng cách sử dụng$routevà slug bài đăng bằng cách sử dụng$route.params.post_slug:

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

Chúng ta có thể sử dụng tham số này để tải nội dung từ chương trình phụ trợ.

Bạn có thể có bao nhiêu phân đoạn động tùy thích, trong cùng một URL:

/post/:author/:post_slug

Hãy nhớ khi trước khi chúng ta nói về điều gì sẽ xảy ra khi người dùng điều hướng đến một tuyến đường mới?

Trong trường hợp của các tuyến đường động, những gì sẽ xảy ra hơi khác một chút.

Vue để hiệu quả hơn thay vì phá hủy thành phần tuyến đường hiện tại và khởi tạo lại nó, nó sử dụng lại phiên bản hiện tại.

Khi điều này xảy ra, Vue gọibeforeRouteUpdatesự kiện vòng đời. Ở đó bạn có thể thực hiện bất kỳ thao tác nào bạn cần:

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()
  }
}

Sử dụng đạo cụ

Trong các ví dụ, tôi đã sử dụng$route.params.*để truy cập dữ liệu tuyến đường. Một thành phần không nên được kết hợp chặt chẽ với bộ định tuyến và thay vào đó, chúng ta có thể sử dụng các đạo cụ:

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

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

Chú ýprops: trueđược chuyển cho đối tượng định tuyến để kích hoạt chức năng này.

Các tuyến đường lồng nhau

Trước khi tôi đề cập rằng bạn có thể có bao nhiêu phân đoạn động tùy thích, trong cùng một URL, như:

/post/:author/:post_slug

Vì vậy, giả sử chúng ta có thành phần Tác giả chăm sóc phân đoạn động đầu tiên:

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

Chúng tôi có thể chèn một giâyrouter-viewcá thể thành phần bên trong mẫu Tác giả:

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

chúng tôi thêm thành phần Bài đăng:

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

và sau đó chúng tôi sẽ đưa tuyến động bên trong vào cấu hình VueRouter:

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

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác: