vue05---路由初體驗02

時間 2019-11-12

原文原文鏈接

1. 路由參數

1.1 給路由添加參數的方法 :參數名（方法名能夠自定義）。

在HTML中獲取路由的參數使用：$route.params.參數名；在JS中獲取路由參數經過 this.$route.params.參數名

實例代碼以下：html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>路由初體驗</title>
 8   <script src="./js/vue2.js"></script>
 9   <script src="./js/vue-router-3.0.1.js"></script>
10 </head>
11 <body>
12   <div id="app">
13     <ul>
14       <li><router-link to="/index">首頁</router-link></li>
15       <!-- 1. 由於一下三個選項應用用一個組件product,爲了便於區分，爲每一項加一個參數，分別爲 11 22 33 -->
16       <li><router-link to="/product/11">水果</router-link></li>
17       <li><router-link to="/product/22">蔬菜</router-link></li>
18       <li><router-link to="/product/33">肉類</router-link></li>
19     </ul>  
20     <router-view></router-view>
21   </div>
22   <script>
23     var index = Vue.component('index', {
24       template: '<div>首頁</div>'
25     })
26     var product = Vue.component('product', {   //3. 在HTML中獲取路由的參數使用：$route.params.參數名
27       template: `
28         <div> 這裏顯示產品的編號{{$route.params.id}}</div>
29       `,
30       mounted(){
31         //4. 在JS中獲取路由參數經過 this.$route.params.參數名
32         console.log(this.$route.params.id)
33       }
34     })
35     var router = new VueRouter({
36       routes: [
37         {name: 'index', path:'/index', component: index},
38         //2. 給路由添加參數的方法  :參數名（參數名能夠自定義,此處定義爲id）
39         {name: 'product', path:'/product/:id', component: product}
40       ]
41     })
42     var vm = new Vue({
43       el: '#app',
44       router: router,  
45       data: {
46 
47       }
48     })
49   </script>
50 </body>
51 </html>

1.2 頁面效果：

1.3 添加和獲取路由參數

給路由添加參數的方法 :參數名

 {name: 'product', path:'/product/:id', component: product}

在HTML中獲取路由的參數使用：$route.params.參數名

      template: `
        <div> 這裏顯示產品的編號{{$route.params.id}}</div>
      `,

在JS中獲取路由參數經過 this.$route.params.參數名

mounted(){
        //4. 在JS中獲取路由參數經過 this.$route.params.參數名
        console.log(this.$route.params.id)
      }

獲取參數頁面：

2. 監聽路由參數的變化

組件複用時，相對路由參數的變化作出相應的話，能夠經過 watch （檢測變化）$route 對象。

$route 對象有兩個參數，to和 from，to表示將要去的路由對象 from表示從哪一個路由對象來

實例代碼：vue

watch: {
          // 這裏的to表示將要去的路由對象  from表示從哪一個路由對象來
        '$route'(to, from){
          console.log(to);
          console.log(from);
          if(to.params.id === '11'){
            this.allProducts = '蘋果、香蕉、桃子。。。。。。'       
          }else if (to.params.id === '22'){
            this.allProducts = '白菜、青椒、胡蘿蔔。。。。。。'
          }else {
            this.allProducts = '豬肉、羊肉、牛肉。。。。。。'
          }
        }
      }

　　頁面效果：vue-router

3. 嵌套路由和編程式導航

嵌套路由步驟： 1. 路由的嵌套經過 children 屬性來建立，它也是一個數組，數組裏麪包含對象。每個對象是一條路由規則

2. 建立子路由中的組件

3. 爲建立好的子路由組件挖坑，使用router-view。點擊按鈕顯示router-view中的內容（編程式導航）

4. 經過$router來實現跳轉,跳轉到名爲 name 值得路由規則的地方

示例以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>路由初體驗</title>
 8   <script src="./js/vue2.js"></script>
 9   <script src="./js/vue-router-3.0.1.js"></script>
10 </head>
11 <body>
12   <div id="app">
13     <ul>
14       <li><router-link to="/index">首頁</router-link></li>
15       <li><router-link to="/product/11">水果</router-link></li>
16       <li><router-link to="/product/22">蔬菜</router-link></li>
17       <li><router-link to="/product/33">肉類</router-link></li>
18     </ul>  
19     <router-view></router-view>
20   </div>
21   <script>
22     var index = Vue.component('index', {
23       template: '<div>首頁</div>'
24     })
25     //2. 建立子路由中的組件
26     var bookM = Vue.component('bookM', {
27       template: '<div>這裏是詳細的菜單，請查看</div>'
28     })
29     var product = Vue.component('product', { 
30       //3. 爲建立好的子路由組件挖坑，使用router-view。    點擊按鈕顯示router-view中的內容（編程式導航）
31       template: `
32         <div> 
33           這裏顯示產品的編號{{$route.params.id}}
34           <h3>{{allProducts}}<button @click="checkM">點擊按鈕查看</button></h3>
35           <router-view></router-view>  
36         </div>
37       `,
38       data(){
39         return {
40           allProducts: ''
41         }
42       },
43       methods: {
44         checkM(){
45           //4. 經過$router來實現跳轉,跳轉到名爲 name 值得路由規則的地方
46           this.$router.push({name: 'bookM'})
47         }
48       },
49       mounted(){
50         console.log(this.$route.params.id)
51       },
52       watch: {
53         '$route'(to, from){
54           console.log(to);
55           console.log(from);
56           if(to.params.id === '11'){
57             this.allProducts = '蘋果、香蕉、桃子。。。。。。'       
58           }else if (to.params.id === '22'){
59             this.allProducts = '白菜、青椒、胡蘿蔔。。。。。。'
60           }else {
61             this.allProducts = '豬肉、羊肉、牛肉。。。。。。'
62           }
63         }
64       }
65     })
66     var router = new VueRouter({
67       routes: [
68         {name: 'index', path:'/index', component: index},
69         //1. 路由的嵌套經過children屬性來建立，它也是一個數組，數組裏麪包含對象。每個對象是一條路由規則
70         {name: 'product', path:'/product/:id', component: product,
71           children: [  //注意：子路由的 path 中不能帶有 /
72             {name: 'bookM', path: 'book_path', component: bookM}
73           ]
74         }
75       ]
76     })
77     var vm = new Vue({
78       el: '#app',
79       router: router,  
80       data: {
81 
82       }
83     })
84   </script>
85 </body>
86 </html>

頁面顯示：

4. 路由重定向

重定向也在 `routes` 配置中完成。經過 redirect 來實現。例如要重定向`/a`到`/b`：

var router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

　　重定向也能夠定位到命名路線：

var router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

　　甚至使用函數進行動態重定向：

var router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // the function receives the target route as the argument
      // return redirect path/location here.
    }}
  ]
})

　　本身的示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>路由初體驗</title>
 8   <script src="./js/vue2.js"></script>
 9   <script src="./js/vue-router-3.0.1.js"></script>
10 </head>
11 <body>
12   <div id="app">
13     <ul>
14       <li><router-link to="/index">首頁</router-link></li>
15       <li><router-link to="/product/11">水果</router-link></li>
16       <li><router-link to="/product/22">蔬菜</router-link></li>
17       <li><router-link to="/product/33">肉類</router-link></li>
18     </ul>  
19     <router-view></router-view>
20   </div>
21   <script>
22     var index = Vue.component('index', {
23       template: '<div>首頁</div>'
24     })
25     var bookM = Vue.component('bookM', {
26       template: '<div>這裏是詳細的菜單，請查看</div>'
27     })
28     var product = Vue.component('product', { 
29       template: `
30         <div> 
31           這裏顯示產品的編號{{$route.params.id}}
32           <h3>{{allProducts}}<button @click="checkM">點擊按鈕查看</button></h3>
33           <router-view></router-view>  
34         </div>
35       `,
36       data(){
37         return {
38           allProducts: ''
39         }
40       },
41       methods: {
42         checkM(){
43           this.$router.push({name: 'bookM'})
44         }
45       },
46       mounted(){
47         console.log(this.$route.params.id)
48       },
49       watch: {
50         '$route'(to, from){
51           console.log(to);
52           console.log(from);
53           if(to.params.id === '11'){
54             this.allProducts = '蘋果、香蕉、桃子。。。。。。'       
55           }else if (to.params.id === '22'){
56             this.allProducts = '白菜、青椒、胡蘿蔔。。。。。。'
57           }else {
58             this.allProducts = '豬肉、羊肉、牛肉。。。。。。'
59           }
60         }
61       }
62     })
63     var router = new VueRouter({
64       routes: [
65         {name: 'index', path:'/index', component: index},
66         {name: 'product', path:'/product/:id', component: product,
67           children: [
68             {name: 'bookM', path: 'book_path', component: bookM}
69           ]
70         }, 
71         //路由重定向  這裏的 path: '*' 意思是除了上述定義的路徑以外，輸入任何其餘的路徑，都默認切換到index
72         {name: 'default', path: '*', redirect: '/index'}
73         // {name: 'default', path: '*', redirect: {name: '/index'}}  或者這種方法
74       ]
75     })
76     var vm = new Vue({
77       el: '#app',
78       router: router,  
79       data: {
80 
81       }
82     })
83   </script>
84 </body>
85 </html>