更新時間:2023-03-22 來源:黑馬程序員 瀏覽量:

在Vue.js中,$route和$router都是與路由相關的對象,但它們的作用略有不同。
$router是Vue Router實例,它提供了許多方法和屬性來管理應用程序的路由,例如動態(tài)路由添加,路由切換,導航等等。
別是什么.jpg)
而$route是當前活動路由的對象,它包含了當前URL解析得到的信息,如當前路由的名稱、路徑、參數(shù)、查詢參數(shù)等等。
下面是一個簡單的Vue組件示例,演示了$route和$router的使用:
<template>
<div>
<h1>當前路由信息</h1>
<p>名稱: {{ $route.name }}</p>
<p>路徑: {{ $route.path }}</p>
<p>參數(shù): {{ $route.params }}</p>
<p>查詢參數(shù): {{ $route.query }}</p>
<h1>導航</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 對象
console.log(this.$route) // 打印 $route 對象
},
}
</script>在上述示例中,我們通過$router對象提供的router-link組件來進行頁面間的導航,而通過$route對象來展示當前路由的信息。