這次帶給大家如何對vue傳參與router使用,對vue傳參與router使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
vue傳參方法一
1,路由設定
{ path: '/describe/:id', name: 'Describe', component: Describe }
2,使用方法
// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ // 这个id是一个变量,随便是什么值都可以 path: /describe/${id}`, })
3,取得方法(在describe頁)
$route.params.id
使用以上方法可以拿到上頁傳過來的id值
vue傳參方法二
1,路由設定
{ path: '/describe', name: 'Describe', component: Describe } (这个地方默认配置就可以了,不用做任何的处理)
2,使用方法
this.$router.push({ name: 'Describe', params: { id: id } })
父元件中:透過路由屬性中的name來決定匹配的路由,透過params來傳遞參數。
3,取得方法(在describe頁)
$route.params.id
也用params取得就可以了;
##vue傳參方法三
1,路由設定{ path: '/describe', name: 'Describe', component: Describe }(預設設定)2,使用方法
this.$router.push({ path: '/describe', query: { id: id } }) (params换成了query)3,取得方法(在describe頁面)
$route.query.id(這個地方用query還獲取id,和前面用的params獲取的區別在於,用query獲取的id值會在url中有顯示,可以看到你傳過來的值)
props傳值方法
父元件(table-data這個地方可以隨便取名字,不是特定的值)<p class="content"> //这个是一个普通组件,其中tabelData可以是变量,也可以是常量,和pageInfo一样样,这里打算传递两个值过去,其实也可以用对象的方式传过去都是可以的。 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table> </p>子元件
props: ['tableData', 'pageInfo'], data() { return { tData: this.tableData, page: this.pageInfo } }prop是單向綁定的,不應該在子元件內部改變prop。不過這裡的props傳過來的值會隨之父元件的值的改變而改變,是動態改變的。
$route使用小技巧
1,$route.path類型: string字串,對應目前路由的路徑,總是解析為絕對路徑,如"/foo/bar"。
2,$route.params類型: Object 一個key/value 對象,包含了動態片段和全匹配片段,如果沒有路由參數,就是一個空物件。
3,$route.query類型: Object一個 key/value 對象,表示 URL 查詢參數。例如,對於路徑 /foo?user=1,則有 $route.query.user == 1,如果沒有查詢參數,則是個空物件。 4,$route.hash類型: string目前路由的 hash 值 (帶 #) ,如果沒有 hash 值,則為空字串。 5,$route.fullPath類型: string#完成解析後的 URL,包含查詢參數和 hash 的完整路徑。 相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:以上是如何對vue傳參與router使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!