1. 程式人生 > >vue $router和$route的區別

vue $router和$route的區別

一、

router為VueRouter的例項,相當於一個全域性的路由器物件,裡面含有很多屬性和子物件,例如history物件。。。經常用的跳轉連結就可以用this.$router.push,和router-link跳轉一樣。。。

this.$router.push會往history棧中新增一個新的記錄。。詳細見vue官方文件https://router.vuejs.org/zh/guide/essentials/navigation.html

route相當於當前正在跳轉的路由物件。。可以從裡面獲取name,path,params,query等。。

列印this.$route和this.$router。

路由傳參的方式

1.可以手寫完整的path:

this.$router.push({path:`/user/${userId}`})

這樣傳遞引數的話,配置路由的時候需要在path上加引數path:user/:userId。

這種接收引數的方式是this.$route.params.userId。

2.也可以用params傳遞:

3.也可以用query傳遞:

query傳參是針對path的,params傳參是針對name的。。接收引數的方式都差不多。。this.$route.query.和this.$route.params.

注意這只是跳轉url,跳轉到這個url顯示什麼元件,得配置路由。router跳轉和<router-link>標籤跳轉,規則差不多。

展示上的話:

注意:如果提供了path,params將會被忽略,但是query不屬於這種情況。。。

如果使用完整路徑和query傳參,重新整理頁面時不會造成路由傳參的引數丟失。

這個vue官方文件講的很詳細。

二、

有時候配置路由時path有時候會加 '/' 有時候不加,例如path:'name'和path:'/name'。區別其實官方文件說了,我當時沒仔細看,導致這個問題還困擾了我很久。

意思就是以 / 開頭的會被當做路徑,就不會一直巢狀之前的路徑。

相關推薦

vue中$router 與 $route區別

vue-router中經常會操作的兩個物件\(route和\)router兩個。 1、$route物件 $route物件表示當前的路由資訊,包含了當前 URL 解析得到的資訊。包含當前的路徑,引數,query物件等。 **1.$route.path** 字串,對應當前路由的路徑,總是解析為絕

$router&$route區別

一個 spa col style url hist 實例 想要 pat $route為當前router跳轉對象 裏面可以獲取name、path、query、params等 $router為VueRouter實例,想要導航到不同URL,則使用$router.push方法 返回

vue-router中queryparams傳參(接收引數)以及$router、$route區別

  query傳參: this.$router.push({ path:'/...' query:{ id:id } }) 接收引數:this.$route.query.id params傳值: 傳參: this.$router.push({ name:'...' params:{ id:id

vue-router中queryparams傳參(接收參數)以及$router、$route區別

params path 以及 url this 區別 nbsp pan str query傳參: this.$router.push({ path:‘/...‘ query:{ id:id } })

vue-router queryparams傳參(接收引數),$router、$route區別

連結:https://www.cnblogs.com/zhangruiqi/p/9412539.html 1.query方式傳參和接收引數 傳參: this.$router.push({ path:'/xxx' query:{ id:id

vue $router$route區別

一、 router為VueRouter的例項,相當於一個全域性的路由器物件,裡面含有很多屬性和子物件,例如history物件。。。經常用的跳轉連結就可以用this.$router.push,和router-link跳轉一樣。。。 this.$router.push會往hi

vue2.0 $router$route區別

info 參數 img 獲取 router 返回 vuerouter outer 分享 在vue2.0裏頁面參數是 this.$route.query或者 this.$route.params 接收router-link傳的參數。 在路由跳轉的時候除了用router-lin

router.go,router.push,router.replace的區別

ddl pos 代碼 不生效 區別 sub 意思 查詢 它的 除了使用 <router-link> 創建 a 標簽來定義導航鏈接,我們還可以借助 router 的實例方法,通過編寫代碼來實現。當你點擊 <router-link> 時,這個方法會在內部

vuerouter.go、router.pushrouter.replace的區別

記錄 out 整數 添加 history 它的 lac 的區別 意思 router.go(n) 這個方法的參數是一個整數,意思是在 history 記錄中向前或者後退多少步,類似 window.history.go(n) router.push(location) 想要

Vue挖坑指南:[vue-router] Named Route 'XXX' has a default child route.

前言 OA系統,使用了路由的巢狀,希望在訪問子模組時,預設載入模組的預設路由。即為子模組設定預設路由 。 開始 我們先來看看,如何為子模組設定預設的路由。 這樣寫,會出現什麼問題呢?開啟控制檯看看。  實踐 vue-router給我們報了兩個警告,我們一個一個

vue-routerrouter.push、router.replace、router.go的區別

router.push 想要導航到不同的 URL,則使用 router.push 方法。這個方法會向 history 棧新增一個新的記錄,所以,當用戶點選瀏覽器後退按鈕時,則回到之前的 URL。 <router-link :to="...">  == ro

理解OpenShift(1):網路之 Router Route Neutron 理解 (7): Neutron 是如何實現負載均衡器虛擬化的

 理解OpenShift(1):網路之Router 和 Route   1. OpenShift 為什麼需要 Router 和 Route? 顧名思義,Router 是路由器,Route 是路由器中配置的路由。OpenShift 中的這兩個概念是為了解決從叢集外部(就是從除了叢集節點

牛叉的react-router-cache-route

CacheRoute github地址 搭配 react-router 工作的、帶快取功能的路由元件,類似於 Vue 中的 keep-alive 功能 注意:目前只在 路由前進時 進行快取 React v16.3+ (相容了 React v16.3 以下版本

vuerouter以及route的使用

路由基本概念 route,它是一條路由。 { path: '/home', component: Home } routes,是一組路由。 const routes = [ { path: '/home', component: Home }, { path: '/about'

Vue挖坑指南:[vue-router] Named Route 'XXX' has a default child route.

前言 OA系統,使用了路由的巢狀,希望在訪問子模組時,預設載入模組的預設路由。即為子模組設定預設路由 。 開始 我們先來看看,如何為子模組設定預設的路由。 這樣寫,會出現什麼問題呢?開啟控制檯看看。  實踐 vue-router給我們報了兩個警告,我們一個一個

React RouterRoute的使用

Route 是 React Router中用於配置路由資訊的元件,每當有一個元件需要根據 URL 決定是否渲染時,就需要建立一個 Route。 1) path 每個 Route 都需要定義一個 path 屬性,path 屬性是一個url,當 URL 匹配一個 Route 時,這個 Route 中定義的元件

routerroute的理解

$router : 是路由操作物件,只寫物件 $route : 路由資訊物件,只讀物件 如果要在重新整理頁面的時候通過路由的資訊來操作資料,可以在created下 使用this.$route 這個的屬性   this.$route 存著一些與路由相關的資訊

理解OpenShift(1):網路之 Router Route

1. OpenShift 為什麼需要 Router 和 Route? 顧名思義,Router 是路由器,Route 是路由器中配置的路由。OpenShift 中的這兩個概念是為了解決從叢集外部(就是從除了叢集節點以外的其它地方)訪問服務的需求。不曉得為什麼OpenShift 要將Kubernetes

Express中approuter路由的區別

1.app app物件通常表示Express應用程式 var express = require('express'); var app = express(); 2.Router 目的 : router目的是中介軟體和路由的分離的例項。 可以將

Vue.Router、query、params、$router、$route

1、query方式傳參和接收引數 傳參: this.$router.push({    &nb