全國(guó)咨詢(xún)/投訴熱線(xiàn):400-618-4000

首頁(yè)常見(jiàn)問(wèn)題正文

$route和$router的區(qū)別是什么?

更新時(shí)間:2023-03-22 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

  在Vue.js中,$route和$router都是與路由相關(guān)的對(duì)象,但它們的作用略有不同。

  $router是Vue Router實(shí)例,它提供了許多方法和屬性來(lái)管理應(yīng)用程序的路由,例如動(dòng)態(tài)路由添加,路由切換,導(dǎo)航等等。

1679449570059_$route和$router的區(qū)別是什么.jpg

  而$route是當(dāng)前活動(dòng)路由的對(duì)象,它包含了當(dāng)前URL解析得到的信息,如當(dāng)前路由的名稱(chēng)、路徑、參數(shù)、查詢(xún)參數(shù)等等。

  下面是一個(gè)簡(jiǎn)單的Vue組件示例,演示了$route和$router的使用:

<template>
  <div>
    <h1>當(dāng)前路由信息</h1>
    <p>名稱(chēng): {{ $route.name }}</p>
    <p>路徑: {{ $route.path }}</p>
    <p>參數(shù): {{ $route.params }}</p>
    <p>查詢(xún)參數(shù): {{ $route.query }}</p>
    <h1>導(dǎo)航</h1>
    <ul>
      <li><router-link :to="{ name: 'home' }">Home</router-link></li>
      <li><router-link :to="{ name: 'about' }">About</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    console.log(this.$router) // 打印 $router 對(duì)象
    console.log(this.$route) // 打印 $route 對(duì)象
  },
}
</script>

  在上述示例中,我們通過(guò)$router對(duì)象提供的router-link組件來(lái)進(jìn)行頁(yè)面間的導(dǎo)航,而通過(guò)$route對(duì)象來(lái)展示當(dāng)前路由的信息。

分享到:
在線(xiàn)咨詢(xún) 我要報(bào)名
和我們?cè)诰€(xiàn)交談!