路由初体验02

Posted lirun-rainbow

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了路由初体验02相关的知识,希望对你有一定的参考价值。

1. 路由参数

    1.1  给路由添加参数的方法 :参数名 (方法名可以自定义)。  

        在html中获取路由的参数使用:$route.params.参数名;在JS中获取路由参数通过 this.$route.params.参数名

实例代码如下:

 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表示从哪个路由对象来

实例代码:

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 = ‘猪肉、羊肉、牛肉。。。。。。‘
          }
        }
      }

  页面效果:

                      技术图片

 

 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>

页面效果:    地址栏无论输入任何错误地址  都默认会首页页面  这就是重定向

      技术图片         技术图片

 

以上是关于路由初体验02的主要内容,如果未能解决你的问题,请参考以下文章

Vertx 路由初体验

vs code初体验

vue3.0 Composition API 上手初体验 用路由循环,做个导航菜单

vue3.0 Composition API 上手初体验 用路由循环,做个导航菜单

Vue教程(四十一)Vue-router路由初体验

Vue教程(四十一)Vue-router路由初体验