目錄
步驟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對象。