目錄
步驟1:修改路由匹配規則 routes 裏面的 path屬性值
步驟2:在連接跳轉處,修改 router-link的 to屬性值
步驟1:修改 routes路由匹配規則 裏面的 path屬性值
一、前言
上一篇文章我們介紹了路由傳參-使用query方式傳遞路由參數,詳細可參考博文:原創 Vue筆記整理,專題之路由:5、路由傳參-使用query方式傳遞路由參數 這篇博文我們將介紹:路由傳參-使用params方式傳遞路由參數
二、使用params方式傳遞路由參數
1、路由實例簡約版
之前介紹了路由的基本使用,現在我們繼續寫一個類似的簡單實例,之前加了註釋,這裏之前的註釋就不加了。
然後在它的基礎上演示:使用 params方式傳遞路由參數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>08.路由規則中定義參數</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登錄</router-link>
<router-link to="/register">註冊</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登錄組件</h1>'
}
var register = {
template: '<h1>註冊組件</h1>'
}
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
],
})
// 創建 Vue 實例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router//如上面屬性值和屬性名完全一樣,可以簡寫成這樣。
});
</script>
</body>
</html>
2、使用params方式傳遞路由參數
步驟1:修改路由匹配規則 routes 裏面的 path屬性值
如下圖:加了一個 :id
步驟2:在連接跳轉處,修改 router-link的 to屬性值
如下圖:加了一個 /12
我們運行程序,點擊登錄進行切換,發現瀏覽器url地址多了一個 /12
說明修改以後:router-link的 to屬性值 能和 routes 裏面的 path屬性值 能匹配上
那麼怎麼在組件內部拿到這個參數id呢?
步驟3:組件內部拿到這個參數id
組件有它的生命週期 ,我們在登錄組件裏面,寫一個它的生命週期方法 created,並輸出相關對象:
var login = {
template: '<h1>登錄組件</h1>',
created() { // 組件的生命週期鉤子函數
// this代表當前組件,$route 表示當前路由信息對象
console.log(this.$route)
}
}
運行程序,點擊登錄進行切換,檢查元素,我們來看一下輸出結果:
這個時候 query對象 裏面沒有值,因爲我們沒有用到上篇博文提到的方式,如下:
<router-link to="/login?id=10&name=zs">登錄</router-link>
這時候的 id值 在 params裏面。
然後我們可以這樣來獲取 id 的值:this.$route.params.id
var login = {
template: '<h1>登錄組件</h1>',
created(){ // 組件的生命週期鉤子函數
console.log(this.$route)
console.log(this.$route.params.id)
}
}
那麼怎麼把 id的值 放到 h1標籤裏面
步驟4:把 id的值 放到 h1標籤裏面
這個就不多說了,與query方式傳遞路由類似,只是把關鍵字更換爲 params
運行程序,點擊登錄進行切換,我們來看一下效果
3、使用 params方式傳遞多個參數
步驟1:修改 routes路由匹配規則 裏面的 path屬性值
步驟2:修改 router-link的 to屬性值
運行程序,點擊登錄進行切換,我們來看一下效果
注意:如果你只寫一個參數,如下:
<router-link to="/login/12">登錄</router-link>
這樣運行程序,是匹配不上 routes路由匹配規則的。
4、修改後的最終代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>09.路由規則傳參方式2_params</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login/12/ls">登錄</router-link>
<router-link to="/register">註冊</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登錄組件---{{ $route.params.id }}---{{ $route.params.name }}</h1>',
created(){ // 組件的生命週期鉤子函數
console.log(this.$route)
console.log(this.$route.params.id)
}
}
var register = {
template: '<h1>註冊</h1>'
}
var router = new VueRouter({
routes: [
//:id 這個冒號是佔位符。整個的意思是,將來這個位置要傳入一個 id進來
//具體這個 id怎麼來,需要具體地址 url進行解析得到
{ path: '/login/:id/:name', component: login },
{ path: '/register', component: register }
]
})
// 創建 Vue 實例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router
});
</script>
</body>
</html>
三、其他
1、有關 query和 params方式傳遞路由參數,這兩種方式,使用哪種看個人使用習慣
2、運行程序,點擊登錄進行切換,檢查元素,我們來看一下輸出結果:
這個 params對象裏面的值,是怎麼來的?
在 matched 匹配對象裏面,path是我們手動寫的格式,在內部它會通過預解析成一個 regex形式的正則表達式,
然後用這個正則表達式去解析 fullPath對象,解析出來的結果就是我們的 params對象。