更新時(shí)間:2023-03-22 來源:黑馬程序員 瀏覽量:
在Vue.js中,$route和$router都是與路由相關(guān)的對(duì)象,但它們的作用略有不同。
$router是Vue Router實(shí)例,它提供了許多方法和屬性來管理應(yīng)用程序的路由,例如動(dòng)態(tài)路由添加,路由切換,導(dǎo)航等等。
而$route是當(dāng)前活動(dòng)路由的對(duì)象,它包含了當(dāng)前URL解析得到的信息,如當(dāng)前路由的名稱、路徑、參數(shù)、查詢參數(shù)等等。
下面是一個(gè)簡(jiǎn)單的Vue組件示例,演示了$route和$router的使用:
<template> <div> <h1>當(dāng)前路由信息</h1> <p>名稱: {{ $route.name }}</p> <p>路徑: {{ $route.path }}</p> <p>參數(shù): {{ $route.params }}</p> <p>查詢參數(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>
在上述示例中,我們通過$router對(duì)象提供的router-link組件來進(jìn)行頁面間的導(dǎo)航,而通過$route對(duì)象來展示當(dāng)前路由的信息。
【AI設(shè)計(jì)】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計(jì)連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運(yùn)營(yíng)】深圳跨境電商運(yùn)營(yíng)畢業(yè)22個(gè)工作日,就業(yè)率91%+,最高薪資達(dá)13500元
2025-09-19【AI運(yùn)維】鄭州運(yùn)維1期就業(yè)班,畢業(yè)14個(gè)工作日,班級(jí)93%同學(xué)已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開發(fā)】上海校區(qū)AI鴻蒙開發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開發(fā)-Python】畢業(yè)33個(gè)工作日,就業(yè)率已達(dá)到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開發(fā)-Java】畢業(yè)5個(gè)工作日就業(yè)率98.18%,最高薪資 17.5k*13薪,全班平均薪資9244元
2025-09-19