目錄
步驟1：router-link 標籤 to屬性添加參數 id (不需要修改 路由規則的 path 屬性)
***5、this.$route.query.id 是怎麼來的？
一、前言
上兩篇文章我們介紹了：路由（vue-router）的基本使用、tag屬性和router-link的使用、路由redirect重定向的使用-設置默認頁面、設置選中路由高亮的兩種方式，詳細可參見博文：
原創 Vue筆記整理，專題之路由：3、路由（vue-router）的基本使用、tag屬性和router-link的使用
原創 Vue筆記整理，專題之路由：4、路由redirect重定向的使用-設置默認頁面、設置選中路由高亮的兩種方式
這篇博文我們將介紹：路由傳參-使用query方式傳遞參數
二、路由傳參-使用query方式傳遞參數
1、路由實例簡約版：router掛載簡寫
之前介紹了路由的基本使用，現在我們繼續寫一個類似的簡單實例，之前加了註釋，這裏之前的註釋就不加了。
然後在它的基礎上演示：使用query方式傳遞參數
<!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.路由規則傳參方式1_query</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、使用query方式傳遞參數
步驟1：router-link 標籤 to屬性添加參數 id (不需要修改 路由規則的 path 屬性)
首先我給 router-link 標籤，加上一個 id=10 的參數代碼，如下圖：
路由實例的路由匹配規則 routes 裏面，並沒有進行相應改變
我們運行程序，雖然瀏覽器url地址多了id=10
但是 router-link標籤的to 仍然能匹配到 routes的path
說明：如果在路由中，使用 查詢字符串，給路由傳遞參數，則 不需要修改 路由規則的 path 屬性
那麼怎麼在組件內部拿到這個參數id呢？
步驟2：在組件內部拿到這個參數id
組件有它的生命週期 ，我們在登錄組件裏面，寫一個它的生命週期方法 created，並輸出相關對象：
var login = {
template: '<h1>登錄組件</h1>',
created() { // 組件的生命週期鉤子函數
// this代表當前組件，$route 表示當前路由信息對象
console.log(this.$route)
}
}
運行程序，點擊登錄進行切換，檢查元素，我們來看一下輸出結果：
然後我們可以這樣來獲取 id 的值：this.$route.query.id
var login = {
template: '<h1>登錄組件</h1>',
created() { // 組件的生命週期鉤子函數
// this代表當前組件，$route 表示當前路由信息對象
console.log(this.$route)
console.log(this.$route.query.id)
}
}
那麼怎麼把 id的值 放到 h1標籤裏面
步驟3：把 id的值 放到 h1標籤裏面
可以使用 插值表達式，然後我們之前可以寫一個data方法，這樣在組件裏面輸出
運行程序，點擊登錄進行切換，我們來看一下效果
那麼我們同樣可以這樣，來輸出 id的值
運行程序，點擊登錄進行切換，我們來看一下效果
3、使用query方式傳遞多個參數
步驟1：router-link標籤 to屬性加參數
我們再在 router-link 加一個 name參數，如下圖：
步驟2：登錄組件 裏面輸出
然後同樣在 登錄組件 裏面，這樣輸出就行
運行程序，點擊登錄進行切換，我們來看一下效果
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>08.路由規則傳參方式1_query</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">
<!-- 如果在路由中，使用 查詢字符串，給路由傳遞參數，則 不需要修改 路由規則的 path 屬性 -->
<router-link to="/login?id=10&name=zs">登錄</router-link>
<router-link to="/register">註冊</router-link>
<router-view></router-view>
</div>
<script>
var login = {
// //this 代表當前組件的實例，默認可以省略
// //template: '<h1>登錄組件---{{ this.msg }}</h1>',
// template: '<h1>登錄組件---{{ msg }}</h1>',
// data() {
// return {
// msg: '123'
// }
// },
template: '<h1>登錄組件---{{ $route.query.id }}---{{ $route.query.name }}</h1>',
created() { // 組件的生命週期鉤子函數
// this代表當前組件，$route 表示當前路由信息對象
console.log(this.$route)
console.log(this.$route.query.id)
}
}
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>
***5、this.$route.query.id 是怎麼來的？
如果你不知道這個怎麼來的，你可以這樣操作：輸出 vm實例
步驟1：
運行程序，點擊登錄進行切換，它會切換到路徑：xxxxxx.html#/login?id=10&name=zs
步驟2：
檢查元素，點擊Console，在打印輸出位置輸入vm，enter回車（別忘記）
步驟3：找到 routerRoot下面的 $route
步驟4：
點擊右邊的 三個點，左邊會彈出一個三角形，點擊展開如下：
現在我們知道：this.$route.query.id 是怎麼來的了吧！
另外需要注意的是輸出的對象 vm ，是 Vue 的實例對象vm
如果你嘗試把名字改了，再去瀏覽器輸出，會報如下錯誤：
