這篇文章帶給大家的內容是關於vue中$router和$route的簡單介紹（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
路由基本概念
route，它是一條路由。
{ path: '/home', component: Home }routes，是一組路由。
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]router可以理解為一個容器，或者說一種機制，它管理了一組route。簡單來說，route只是進行了URL和函數的映射，而當接收到一個URL之後，去路由映射表中查找對應的函數，這個過程是由router來處理的。
const router = new VueRouter({
routes // routes: routes 的简写
})VUE中
$route為目前router跳轉物件裡面可以取得name、path、query、params等。
$router為VueRouter實例，想要導覽至不同URL，則使用$router.push方法，返回上一個history使用$router.go方法。跟上面說的一樣，這裡的$router就管理路由的跳轉，英文裡er結尾的都表示一種人，這裡你可以把這個想像中一個管理者，他來控制路由去哪裡（push、go） ，這樣就比較容易記。
路由跳轉
1 可以手寫完整的path：
this.$router.push({path:`/user/${userId}`})這種方式需要在路由中作如下設定
{
path: '/user/:userId',
name: '***',
component: ***
}這種接收參數的方式是this.$route.params.userId。
2 也可以用params傳遞：
this.$router.push({name:'Login',params:{id:'leelei'}})
//不带参数 变成 ip/login3 也可以用query傳遞：
this.$router.push({path:'/login',query:{id:'leelei'})
//带查询参数变成 ip/login?id=leelei
//带斜杠/代表从根目录出发，不会嵌套之前的路径query傳參是針對path的，params傳參是針對name的。 。接收參數的方式都差不多。 。 this.$route.query.和this.$route.params.
注意這只是跳到url，跳到這個url顯示什麼元件，要設定路由。 router跳轉和
一些需要注意的事
使用query傳參的話，會在瀏覽器的url欄看到傳的參數類似get請求，使用params傳參的話則不會，類似post請求。
如果提供了path，params將會被忽略（即如果要使用params傳參，則一定要使用name），但是query不屬於這種情況。如果使用完整路徑和query傳參，刷新頁面時不會造成路由傳參的參數遺失。
router.push和router.replace的差異不會向 history 新增記錄，而是替換掉目前的 history 記錄，即使用replace跳到的網頁『後退』按鈕不能點選。
#以上是vue中$router和$route的簡單介紹（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
