VueJS - Định tuyến

VueJS không tích hợp sẵn bộ định tuyến thời trang. Chúng tôi cần làm theo một số bước bổ sung để cài đặt nó.

Tải xuống trực tiếp từ CDN

Phiên bản mới nhất của vue-router hiện có tại https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com cung cấp các liên kết cdn dựa trên npm. Liên kết trên luôn được cập nhật phiên bản mới nhất. Chúng tôi có thể tải xuống và lưu trữ nó, đồng thời sử dụng nó với thẻ script cùng với vue.js như sau:

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

Sử dụng NPM

Chạy lệnh sau để cài đặt vue-router.

npm  install vue-router

Sử dụng GitHub

Chúng tôi có thể sao chép kho lưu trữ từ GitHub như sau:

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

Chúng ta hãy bắt đầu với một ví dụ đơn giản sử dụng vue-router.js.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el: '#app',
            router
         });
      </script>
   </body>
</html>

Output

Để bắt đầu với định tuyến, chúng ta cần thêm tệp vue-router.js. Lấy mã từhttps://unpkg.com/vue-router/dist/vue-router.js và lưu nó trong tệp vue-router.js.

Tập lệnh được thêm vào sau vue.js như sau:

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

Trong phần nội dung, có một liên kết bộ định tuyến được xác định như sau:

<p>
   <router-link   to = "/route1">Router Link 1</router-link>
   <router-link    to = "/route2">Router Link 2</router-link>
</p>

<router-link>là một thành phần được sử dụng để điều hướng đến nội dung HTML sẽ được hiển thị cho người dùng. Thuộc tính to là đích, tức là tệp nguồn nơi nội dung được hiển thị sẽ được chọn.

Trong đoạn mã trên, chúng tôi đã tạo hai liên kết bộ định tuyến.

Hãy xem phần tập lệnh nơi bộ định tuyến được khởi tạo. Có hai hằng số được tạo như sau:

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }

Chúng có các mẫu cần được hiển thị khi nhấp vào liên kết bộ định tuyến.

Tiếp theo, là const route, xác định đường dẫn được hiển thị trong URL.

const routes = [
   { path: '/route1', component: Route1 },
   { path: '/route2', component: Route2 }
];

Các tuyến xác định đường dẫn và thành phần. Con đường tức là/route1 sẽ được hiển thị trong URL khi người dùng nhấp vào liên kết bộ định tuyến.

Thành phần lấy tên mẫu được hiển thị. Đường dẫn từ các tuyến cần phải khớp với liên kết của bộ định tuyến tới thuộc tính.

Ví dụ: <router-link to = ”path here”> </router-link>

Tiếp theo, phiên bản được tạo cho VueRouter bằng đoạn mã sau.

const router = new VueRouter({
   routes // short for `routes: routes`
});

Phương thức khởi tạo VueRouter nhận các tuyến đường làm tham số. Đối tượng bộ định tuyến được gán cho phiên bản vue chính bằng đoạn mã sau.

var vm = new Vue({
   el: '#app',
   router
});

Thực hiện ví dụ và xem hiển thị trong trình duyệt. Khi kiểm tra và kiểm tra liên kết bộ định tuyến, chúng tôi sẽ thấy rằng nó thêm lớp vào phần tử hoạt động như được hiển thị trong ảnh chụp màn hình sau.

Lớp được thêm vào là class = “router-link-exact-active router-link-active”. Liên kết hoạt động nhận được lớp như được hiển thị trong ảnh chụp màn hình ở trên. Một điều khác cần lưu ý là <router-link> được hiển thị dưới dạng một thẻ.

Đạo cụ cho liên kết bộ định tuyến

Hãy để chúng tôi xem thêm một số thuộc tính được chuyển tới <router-link>.

đến

Đây là đường dẫn đích được cung cấp cho <router-link>. Khi được nhấp vào, giá trị của to sẽ được chuyển đến router.push () trong nội bộ. Giá trị phải là một chuỗi hoặc một đối tượng vị trí. Khi sử dụng một đối tượng, chúng ta cần phải ràng buộc nó như trong ví dụ 2.

e.g. 1:  <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2:  <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
   "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.

Sau đây là kết quả của ví dụ 3.

Trong đường dẫn URL, name = Tery là một phần của chuỗi truy vấn. Ví dụ: http: //localhost/vueexamples/vue_router.html#/route1? Name = Tery

thay thế

Thêm thay thế vào liên kết bộ định tuyến sẽ gọi router.replace() thay vì router.push(). Với thay thế, lịch sử điều hướng không được lưu trữ.

Example

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"   replace>Router Link 1</router-link>

nối thêm

Thêm append vào <router-link> <router-link> sẽ làm cho đường dẫn tương đối.

Nếu chúng ta muốn đi từ liên kết bộ định tuyến với đường dẫn / route1 đến đường dẫn liên kết bộ định tuyến / route2, nó sẽ hiển thị đường dẫn trong trình duyệt là / route1 / route2.

Example

<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>

nhãn

Hiện tại <router-link> hiển thị dưới dạng thẻ. Trong trường hợp, chúng tôi muốn hiển thị nó như một số thẻ khác, chúng tôi cần phải xác định giống nhau bằng cách sử dụng tag = ”tagname”;

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Chúng tôi đã chỉ định thẻ là span và đây là những gì được hiển thị trong trình duyệt.

Thẻ được hiển thị bây giờ là thẻ span. Chúng tôi sẽ vẫn thấy nhấp chuột khi chúng tôi nhấp vào liên kết bộ định tuyến để điều hướng.

lớp hoạt động

Theo mặc định, lớp hoạt động được thêm vào khi liên kết bộ định tuyến hoạt động là bộ định tuyến-liên kết-hoạt động. Chúng ta có thể ghi đè lên lớp bằng cách thiết lập giống như trong đoạn mã sau.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Lớp được sử dụng là active_class = ”_active”. Đây là đầu ra được hiển thị trong trình duyệt.

chính xác-hoạt-động-lớp

Lớp hoạt động chính xác mặc định được áp dụng là bộ định tuyến-liên kết-chính xác-hoạt động. Chúng tôi có thể ghi đè nó bằng cách sử dụng lớp hoạt động chính xác.

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Đây là những gì được hiển thị trong trình duyệt.

biến cố

Hiện tại, sự kiện mặc định cho liên kết bộ định tuyến là sự kiện nhấp chuột. Chúng tôi có thể thay đổi tương tự bằng cách sử dụng thuộc tính sự kiện.

Example

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

Bây giờ, khi chúng ta di chuột qua liên kết bộ định tuyến, nó sẽ điều hướng như được hiển thị trong trình duyệt sau. Di chuột qua liên kết Router 1 và chúng ta sẽ thấy điều hướng thay đổi.