說明：
此文章是上一篇文章的延續：
- 注意 router-link 中 to 對應的值得寫法的異同
宮保雞丁
<!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>Document</title>
<script src="./lib/vue-2.6.10.js"></script>
<!-- 這裡引入的路由要依賴在vue下；是以應該加載在 vue 後面
當我們安裝（引用）了這個路由後；這個時候 我們的html就有了一個路由的構造函數(通過new 構造)的使用了：
var router = new VueRouter()
-->
<script src="./lib/vue-router.js"></script>
</head>
<body>
<!-- 第一種 路由傳參
步驟：
1:定義 一個基礎元件：隻包含 templater
2:構造一個路由：var rouObj = new VueRouter({ })
3:在Vue種注冊這個這個路由：和 方法 methods 同級 ，router:rouObj (router是固定的寫法：關鍵詞 ，rouObj就是我們定義的路由)
4:在路由 rouObj 中添加 路由規則：就是routes (注意⚠️這裡和Vue中的關鍵詞router不是同一個單詞) 其中：path 對應 URL中的指向 位址（Hash） ,component:指的是 對應的元件的 名稱 和 步驟1 對應 ️
5：在 Vue 的 div種 添加 路由的容器：<router-view>
6:在 Vue的div中通過 <router-link> 通過 屬性：to 指定對應步驟4 的path部分；；
上面的就是使用的步驟：沒用參數的傳遞；隻是元件的調用
第一中方式：傳遞參數：query
7:在 步驟 6 中的 to中對 指向 通過 ？ 拼接參數的 鍵值對 : （如：to="/login?id=11"）通過 ？ 連結 這個時候健是：id ；值：11
8:在 路由（也即是步驟 2 中 ） 的 created的初始化函數中 通過：this.$route.query.參數的健 ； （也就是：this.$route.query.id）
第二中方式：傳遞參數：params
9: 首先在 路由 rouObj（步驟2中） 的routes 路由規則中的path 的指向的位址後面添加 參數：
如這是初始化的定義： { path: '/login', component: denglu1 } 在path 添加兩個參數：id ;name 後
{ path: '/login/:id/:name', component: denglu1 } //這裡的id 和 name 是參數元素；其中通過連結的冒号(:)是一個占位符
那麼在 Vue的div中的 對規則使用的 <router-link> 中 通過在
初始化：<router-link to="/login ">點選登陸</router-link>
的基礎上添加傳遞的參數：
<router-link to="/login/12/'旺旺' ">點選登陸</router-link>
其是通過斜橫 / 進行參數的拼接
10:和 8 的步驟位置一樣 隻是其是通過 this.$route.params.參數的健 添加的 ；（如：this.$route.params.name）
總結： 多觀察 網頁中的 --》 檢查 --》 通過 在控制台輸入：vm 觀察其中屬性攜帶的參數 這樣了解更清晰
-->
<div id="app">
<!-- router-link 代替上面的 a 标簽在使用元件的時候添加了 # 的使用方式；router-link 不需要添加 # -->
<!-- router-link 中的 to 屬性：指定的是連結到的是哪一個 元件的使用 ；
router-link 預設的 tag 是使用的 a 标簽
我們可以通過 設定 tag 來改變其使用的 标簽
-->
<!-- 在 to指定 的路徑後面添加參數 ；并在元件中使用 -->
<!-- 總結： 多在網頁中通過 檢查 後在控制台 輸入 vm 觀察其中的參數 -->
<!-- 通過 在控制台 的 route檢視資料發現：其中 屬性：params中含有這些參數 ，是以在擷取的時候也可以通過 params 擷取 -->
<router-link to="/login/10/'旺旺'/123 ">登陸</router-link>
<!-- ?上面的在 /login 後面添加的 參數：元件中路由 中的routes路由規則path中的id;對應 login後面的第一個參數id（表示一個參數）：10 ； name 和 paw 依次是第二個和第三個的參數-->
<router-link to="/register?id=66" tag="span">注冊</router-link>
<!-- 這裡的 router-view 标簽是Router提供的；可以看作是一個占位符； 将來 路由規則将比對到的元件 展示到這個 router-view 容器中 -->
<router-view></router-view>
</div>
<script>
var denglu1 = {
template: '<h3>登陸---{{msg}}---{{$route.params.id}}---{{$route.params.name}}</h3>',
data() {
return {
msg: '我是元件中的資訊～～～'
}
},
created() {//元件生命周期中的鈎子函數（可以參考Vue的周期函數）
//this:代表目前元件；在 template中可以使用的話；可以省略
// 總結： 多在網頁中通過 檢查 後在控制台 輸入 vm 觀察其中的參數
//第二種方式擷取 元件中傳遞的參數
//通過 對網頁 檢查 後在控制台觀察 vm 中的參數 屬性 發現 route中的 params中含有這三個參數，是以也可以通過params擷取其傳遞的參數
alert(this.$route.params.name)
}
}
var zhuche1 = {
template: '<h3>注冊元件---{{ this.$route.query.id }}</h3>',
created() {
//複習： router的第一種方式擷取 參數 query
alert(this.$route.query.id)
}
}
var rouObj = new VueRouter({
//route:這個配置對象中的 route 表示 【路由比對規則】 的意思
routes: [
//路由比對規則：
//屬性1:path:表示要監聽的這個連結位址；如下面?登陸的說明；
//在使用 redirect重定向的時候 ；就是預設加載path對應的 預設的規則是redirect中的使用規則
//那麼?下面{path:'/',redirect:'/login'} 意思就是：當這個網頁中沒有路由對應的要指向的規則的時候 ；預設使用的是 login 的規則；；（paht中表示為空；表示沒有使用的定義規則）
{ path: '/', redirect: '/login' },// 使用 redirect:是重定向；；
// 屬性1:path：表示 要監聽的這個連結位址：如 該text.html在網頁中打開的連結是： xxx/test.html ;
//那麼當使用path這個規則位址後其通路的位址就是：xxx/test.html#/login
{ path: '/login/:id/:name/:paw', component: denglu1 }, // 總結： 多在網頁中通過 檢查 後在控制台 輸入 vm 觀察其中的參數
//上面?的 path中有三個參數（可以沒有參數也可以有多個參數；）：其中拼接的冒号（:） 是一個占位符 ； (這三個參數在 标簽<router-link>中定義的 )
// 如：本網頁對應的 沒有參數的位址是：text.html ;那麼在添加了三個參數後：位址應該類似(test.html#/login/10(對應的id)/ls（對應的name）/123(對應的 paw))：test.html#/login/10/ls6/123
{ path: '/register', component: zhuche1 }
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {
},
router: rouObj // 注冊路由：将路由規則注冊對象；注冊到vm執行個體上；用來監聽Url位址的改變；然後通過容器<router-view>展示
})
</script>
</body>
</html>
上圖
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)