在 Vue.js 中，$router 和 $route 是兩個(gè)常用的對(duì)象，用于處理路由相關(guān)的操作。在本文中，我們將介紹 $router 和 $route 的區(qū)別，并且演示如何使用它們。

$router 和 $route 的區(qū)別

在 Vue.js 中，$router 和 $route 分別代表了路由器和當(dāng)前路由。雖然它們都與路由相關(guān)，但是它們的作用不同。

$router

$router 是 Vue.js 中的路由器對(duì)象，用于管理路由。它包含了許多方法，例如 push、replace、go 等等，用于在路由之間進(jìn)行導(dǎo)航。下面是一些常用的方法：

• push(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): void：跳轉(zhuǎn)到一個(gè)新的頁(yè)面，會(huì)向 history 棧添加一個(gè)新的記錄；
• replace(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): void：跳轉(zhuǎn)到一個(gè)新的頁(yè)面，不會(huì)向 history 棧添加一個(gè)新的記錄，而是替換當(dāng)前的記錄；
• go(n: number): void：在 history 棧中向前或向后移動(dòng) n 步；
• back(): void：向后退一步，相當(dāng)于 go(-1)；
• forward(): void：向前進(jìn)一步，相當(dāng)于 go(1)。

除了上述的方法以外，$router 還有一些其他的屬性和方法，例如 currentRoute、beforeEach、afterEach 等等。這些屬性和方法可以讓我們更加方便地管理路由。

$route

$route 是 Vue.js 中的當(dāng)前路由對(duì)象，用于獲取當(dāng)前路由的信息。它包含了許多屬性，例如 path、params、query、hash 等等，用于描述當(dāng)前路由的狀態(tài)。下面是一些常用的屬性：

• path：當(dāng)前路由的路徑；
• params：當(dāng)前路由的參數(shù)，例如 /user/:id 中的 id；
• query：當(dāng)前路由的查詢參數(shù)，例如 /user?id=123 中的 id；
• hash：當(dāng)前路由的哈希值，例如 /user#profile 中的 profile。

除了上述的屬性以外，$route 還有一些其他的屬性和方法，例如 name、meta、fullPath 等等。這些屬性和方法可以讓我們更加方便地獲取當(dāng)前路由的信息。

示例代碼

下面是一個(gè)完整的示例代碼，演示了如何使用 $router 和 $route。在該示例中，我們定義了兩個(gè)路由，分別是 /home 和 /about，并且使用了 $router 和 $route 來(lái)管理路由和獲取路由信息。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Current route: {{ $route.path }}</p>
    <ul>
      <li>
        <router-link to="/home">Home</router-link>
      </li>
      <li>
        <router-link to="/about">About</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: 'Vue.js Router Demo',
    };
  },
};
</script>

在上面的代碼中，我們使用了 <router-link> 組件來(lái)定義兩個(gè)路由鏈接，分別是 /home 和 /about。當(dāng)用戶點(diǎn)擊鏈接時(shí)，會(huì)自動(dòng)跳轉(zhuǎn)到相應(yīng)的頁(yè)面，并且更新 $route 對(duì)象的相關(guān)信息。在 <router-view> 組件中，我們使用了嵌套路由，根據(jù)當(dāng)前路由顯示不同的組件。

下面是關(guān)于 $router 和 $route 的一些常用操作：

// 跳轉(zhuǎn)到一個(gè)新的頁(yè)面
this.$router.push('/home');
// 替換當(dāng)前頁(yè)面
this.$router.replace('/about');
// 向前退一步
this.$router.back();
// 向前進(jìn)一步
this.$router.forward();
// 獲取當(dāng)前路由的路徑
console.log(this.$route.path);
// 獲取當(dāng)前路由的參數(shù)
console.log(this.$route.params.id);
// 獲取當(dāng)前路
路由的查詢參數(shù)
console.log(this.$route.query.id);
// 獲取當(dāng)前路由的哈希值
console.log(this.$route.hash);

總結(jié)

在本文中，我們介紹了 Vue.js 中的 $router 和 r o u t e ，以及它們的區(qū)別。 route，以及它們的區(qū)別。route，以及它們的區(qū)別。router 是用于管理路由的對(duì)象，包含了許多方法和屬性，用于在路由之間進(jìn)行導(dǎo)航。$route 是用于獲取當(dāng)前路由信息的對(duì)象，包含了許多屬性和方法，用于描述當(dāng)前路由的狀態(tài)。

為了更好地了解 $router 和 $route 的使用，我們演示了一個(gè)完整的示例代碼，包含了路由鏈接、嵌套路由、路由導(dǎo)航等等。

到此這篇關(guān)于Vue中$router和$route的區(qū)別詳解的文章就介紹到這了,更多相關(guān)Vue $router $route內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論