結構目錄
1. 頁面傳值（不同之間的頁面傳值）
1.1 index.js配置
源碼：
1 // 引入vue框架
2 import Vue from 'vue'
3 // 引入vue-router路由依賴
4 import Router from 'vue-router'
5 // Home
6 import Home from '@/components/Home'
7
8 import One from '@/components/One'
9
10 // Vue全局使用Router
11 Vue.use(Router) 12
13 // 定義路由配置
14 export default new Router({ 15 routes: [ //配置路由，這里是個數組
16 { //每一個鏈接都是一個對象
17 path: '/', //鏈接路徑
18 name: 'Home', //路由名稱，
19 component: Home, //對應的組件模板
20 alias: '/home'
21 }, 22 { 23 path:'one', // 子頁面1
24 name: 'one', // 路由名稱-命名路由
25 component:One 26 } 27 ] 28 })
1.2配置Home.vue
源碼：
1 <template>
2 <div class="hello">
3 <h1>{{ msg }}</h1>
4 <!-- 添加子路由導航 -->
5 <p>導航 ： 6 <router-link :to="{name: 'one', params:{username:'test123'}}">子頁面1</router-link>
7 </p>
8 <!-- 子頁面展示部分 -->
9 <router-view/>
10 </div>
11 </template>
12
13 <script>
14 export default { 15 name: "Home", 16 data() { 17 return { 18 msg: "Home Page!"
19 }; 20 } 21 }; 22 </script>
23
24 <style scoped>
25 </style>
1.3配置One.vue
源碼：
1 <template>
2 <div class="hello">
3 <h2>{{msg}} - {{$route.params.username}}</h2>
4 </div>
5 </template>
6
7 <script>
8 export default { 9 name: "one", 10 data() { 11 return { 12 msg: "Welcome to One!"
13 }; 14 } 15 }; 16 </script>
17
18 <!-- Add "scoped" attribute to limit CSS to this component only -->
19 <style scoped>
20 h1, 21 h2 { 22 font-weight: normal; 23 } 24 ul { 25 list-style-type: none; 26 padding: 0; 27 } 28 li { 29 display: inline-block; 30 margin: 0 10px; 31 } 32 a { 33 color: #42b983; 34 } 35 </style>
2. url傳值（傳遞參數-同頁面->向下page傳值）
2.1：設置路由
2.2：傳值
2.3：主頁面獲取參數
3. 編程式導航-params傳遞參數
3.1：設置路由
3.2：設置傳遞參數
說明：
A、動態路由使用params傳遞參數，在this.$router.push() 方法中path不能和params一起使用，否則params將無效。需要用name來指定頁面。
B、以上方式參數不會顯示到瀏覽器的地址欄中，如果刷新一次頁面，就獲取不到參數了
3.3：接收參數並且顯示
4.編程式導航-query傳遞參數
4.1：修改傳遞參數形式
4.2：修改接收參數形式
5.以上兩種方式，有什么不同呢？params和query
5.1 query傳參
5.2：params傳參
