Định tuyến Vue

Điều hướng bằng cách sử dụng thành phần động

Để hiểu định tuyến trong Vue, trước tiên chúng ta hãy xem một ứng dụng sử dụng thành phần động để chuyển đổi giữa hai thành phần.

Chúng ta có thể chuyển đổi giữa các thành phần bằng các nút:

 <template>
    <h1>Food!</h1>
    <p>I like most types of food.</p>
</template>

 <template>
    <h1>Animals!</h1>
    <p>I want to learn about at least one new animal every year.</p>
</template>

 <template>
  <p>Choose what part of this page you want to see:</p>
  <button @click="activeComp = 'animal-collection'">Animals</button>
  <button @click="activeComp = 'food-items'">Food</button><br>
  <div>
    <component :is="activeComp"></component>
  </div>
</template>

<script>
export default {
  data() {
      return {
        activeComp: ''
      }
    }
}
</script>

<style scoped>
  button {
    padding: 5px;
    margin: 10px;
  }
  div {
    border: dashed black 1px;
    padding: 20px;
    margin: 10px;
    display: inline-block;
  }
</style>

Từ thành phần động đến định tuyến

Chúng tôi xây dựng các SPA (Ứng dụng một trang) bằng Vue, nghĩa là ứng dụng của chúng tôi chỉ chứa một tệp *.html. Và điều đó có nghĩa là chúng tôi không thể hướng mọi người đến các tệp *.html khác để hiển thị cho họ những nội dung khác trên trang của chúng tôi.

Trong ví dụ trên, chúng tôi có thể điều hướng giữa các nội dung khác nhau trên trang, nhưng chúng tôi không thể cung cấp cho người khác địa chỉ của trang để họ đến trực tiếp phần về thực phẩm, nhưng với định tuyến, chúng tôi có thể làm được điều đó.

Với định tuyến được thiết lập phù hợp, nếu bạn mở ứng dụng Vue có phần mở rộng cho địa chỉ URL, chẳng hạn như "/food-items", bạn sẽ đến thẳng phần có nội dung thực phẩm.

Cài đặt thư viện bộ định tuyến Vue

Để sử dụng định tuyến trong Vue trên máy của bạn, hãy cài đặt thư viện Vue Router trong thư mục dự án của bạn bằng thiết bị đầu cuối:

Cập nhật main.js

Để sử dụng định tuyến, chúng ta phải tạo một bộ định tuyến và chúng ta thực hiện điều đó trong tệp main.js.

 import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'
import FoodItems from './components/FoodItems.vue'
import AnimalCollection from './components/AnimalCollection.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/animals', component: AnimalCollection },
        { path: '/food', component: FoodItems },
    ]
});

const app = createApp(App)

app.use(router);
app.component('food-items', FoodItems);
app.component('animal-collection', AnimalCollection);

app.mount('#app')

Hiện tại, chúng tôi đã tạo một bộ định tuyến có thể mở thành phần 'AnimalCollection' nếu '/animals' được thêm vào cuối địa chỉ URL ban đầu, nhưng nó sẽ không hoạt động cho đến phần tiếp theo khi chúng tôi thêm <router-view> thành phần. Bộ định tuyến cũng theo dõi lịch sử web để bạn có thể quay lại và chuyển tiếp trong lịch sử bằng các mũi tên thường nằm ở góc trên cùng bên trái trong trình duyệt web bên cạnh URL.

Sử dụng Thành phần <router-view>

Để thay đổi nội dung trên trang của chúng ta bằng bộ định tuyến mới, chúng ta cần xóa thành phần động trong ví dụ trước và thay vào đó sử dụng thành phần <router-view> .

 <template>
  <p>Choose what part of this page you want to see:</p>
  <button @click="activeComp = 'animal-collection'">Animals</button>
  <button @click="activeComp = 'food-items'">Food</button><br>
  <div>
    <router-view></router-view>
    <component :is="activeComp"></component>
  </div>
</template>

Nếu bạn đã thực hiện thay đổi ở trên trên máy tính của mình, bạn có thể thêm '/food' vào địa chỉ URL của trang dự án trong trình duyệt và trang sẽ cập nhật để hiển thị nội dung thực phẩm, như sau:

Sử dụng thành phần <router-link>

Chúng ta có thể thay thế các nút bằng thành phần <router-link> vì nó hoạt động tốt hơn với bộ định tuyến.

Chúng tôi không cần thuộc tính dữ liệu 'activeComp' nữa, vì vậy chúng tôi có thể xóa nó và thực tế chúng tôi có thể xóa toàn bộ thẻ <script> vì nó trống.

 <template>
  <p>Choose what part of this page you want to see:</p>
  <router-link to="/animals">Animals</router-link>
  <router-link to="/food">Food</router-link><br>
  <div>
    <router-view></router-view>
  </div>
</template>

<script></script>

Tạo kiểu cho thành phần <router-link>

Thành phần <router-link> được hiển thị thành thẻ <a> . Chúng ta có thể thấy điều đó nếu chúng ta nhấp chuột phải vào phần tử trong trình duyệt và kiểm tra nó:

Như bạn có thể thấy trong ảnh chụp màn hình ở trên, Vue cũng theo dõi thành phần nào đang hoạt động và cung cấp lớp 'router-link-active' cho thành phần <router-link> đang hoạt động (hiện được hiển thị thành <a> thẻ).

Chúng ta có thể sử dụng thông tin ở trên để tạo kiểu nhằm làm nổi bật thành phần <router-link> nào đang hoạt động:

 <template>
  <p>Choose what part of this page you want to see:</p>
  <router-link to="/animals">Animals</router-link>
  <router-link to="/food">Food</router-link><br>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
  a {
    display: inline-block;
    background-color: black;
    border: solid 1px black;
    color: white;
    padding: 5px;
    margin: 10px;
  }
  a:hover,
  a.router-link-active {
    background-color: rgb(110, 79, 13);
  }
  div {
    border: dashed black 1px;
    padding: 20px;
    margin: 10px;
    display: inline-block;
  }
</style>

nhập { createApp } từ 'vue'
nhập { createRouter, createWebHistory } từ 'vue-router'

nhập Ứng dụng từ './App.vue'
nhập FishTypes từ './comComponents/FishTypes.vue'

const bộ định tuyến = createRouter({
    lịch sử: createWebHistory(),
    tuyến đường: [
        { : '/cá', : Các loại cá }
    ]
});

const ứng dụng = createApp(Ứng dụng)
app.use(bộ định tuyến);
app.mount('#app')