Vue学习笔记(4)-带参数路由，嵌套路由，编程式导航

路由传参

明确使用场景：后期很多业务可能需要传递参数，如编辑时需要传递ID
如果在路由配置中添加参数设置

{
    name:'Product',
        // 添加路由的参数配置,参数的标识就是:
        // id这个名称你可以随意，它就相当于一个形参，它所影响不是你如何传递参数，而是后期如何获取参数
        path:'/product/:id',
         component:Product
}

在调用路由的时候的格式

<!-- 这里传递不需要添加: -->
<router-link to="/product/1">水果</router-link>

获取路由参数

通过$route可以获取路由参数对象:this.$route
里面有一个params属性，就存储着当前路由参数，它是一个对象

// 在mounted钩子函数中获取参数
mounted(){
    console.log(this.$route)
    // 通过this.$route.params可以来获取当前的路由参数
    var id = this.$route.params.id
    if(id == 1){
        this.type = '水果'
    }else if(id == 2){
        this.type = '电器'
    }else if(id == 3){
        this.type = '服装'
    }
}

上面代码有一问题：无法去响应路由参数的变化，说得具体一点：mounted钩子函数中的代码无法响应路由参数的变化

1.mounted钩子函数可以响应路由的变化:因为路由变化，需要重新加载路由所对应的组件，如果加载组件，那么就会执行组件的完整的生命周期，所以mounted能够触发

2.但是mounted钩子函数无法响应同一个路由的参数变化。提醒一下，当使用路由参数时，例如从 /product/1 导航到 /product/2，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用

监听(响应)路由的变化

监听方式
处理参数的方式

 watch: {
     // 监听路由的参数的变化
     // to是目标路由对象
     // from:源路由对象
     '$route'(to, from) {
         var id = to.params.id
         if (id == 1) {
             this.type = '水果'
         } else if (id == 2) {
             this.type = '电器'
         } else if (id == 3) {
             this.type = '服装'
         }
     }    
 }

细节：

从一个路由跳转到/product的效果是mounted在起作用
从/product/1到/proudct/2,这是watch在起作用

嵌套路由

为什么需要嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件
如果需要让一个组件内部的某个部分的内容进行动态改变，那么就需要添加嵌套路由
因为我们希望能够匹配的路由所对应的组件在某个组件内部的某个位置出现，而不是覆盖当前页面

如何添加嵌套路由的配置

通过children来设置
细节：不要在嵌套路由的path值中添加/,否则会破坏当前路由的层级

var router = new VueRouter({
    // 3.通过routes来添加路由配置，每个路由配置都是一个对象，里面有常用属性，如name,path,component,redirect
    routes: [
        {
            name: 'Index',
            path: '/index',
            component: Index
        },
        {
            name: 'Product',
            // 添加路由的参数配置,参数的标识就是:
            // id这个名称你可以随意，它就相当于一个形参，它所影响不是你如何传递参数，而是后期如何获取参数
            path: '/product/:id',
            component: Product,
            // 添加当前路由的嵌套路由，通过children来添加
            // children是一个数组，里面的每一个值都是一个具体的路由配置对象
            // 细节：嵌套路由不要添加/，否则会造成路由层级的问题
            children:[
                {
                    name:'Shui',
                    path:'shui',
                    component:Shui
                },
                {
                    name:'Dian',
                    path:'dian',
                    component:Dian
                },
                {
                    name:'Fu',
                    path:'fu',
                    component:Fu
                }
            ]
        }
    ]
})

如何使用嵌套路由：如何进行嵌套路由的跳转

var Product = Vue.component('product', {
template: `<div>{{type}}
    <button>单击展示详细信息</button>
    // 设置嵌套路由对应组件的展示区域
    <router-view></router-view>
</div>`,
......

实现嵌套路由的跳转

以前是通过router-link来实现路由跳转--声明式导航-
现在我们需要通过代码进行跳转--编程式导航
如何实现编程式导航：通过this.$router.push。

nav(){
    if (this.id == 1) {
        // 使用编程式导航跳转到嵌套路由
        this.$router.push({name:'Shui'})
    } else if (this.id == 2) {
        this.$router.push({name:'Dian'})
    } else if (this.id == 3) {
        this.$router.push({name:'Fu'})
    } 
}

案例完整代码

<!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/vue2.js"></script>
  <script src="./lib/vue-router.js"></script>
</head>

<body>
  <div id='app'>
    <router-link to="/index">首页</router-link>
    <router-link to="/product/1">水果</router-link>
    <router-link to="/product/2">电器</router-link>
    <router-link to="/product/3">服装</router-link>
    <h2>下面是路由所对应的组件的展示区域</h2>
    <router-view></router-view>
  </div>
  <script>
    // 添加组件
    var Index = Vue.component('index', {
      template: '<div>首页</div>'
    })
    var Product = Vue.component('product', {
      template: `<div>{{type}} 
      <button @click='nav'>单机展示详细信息</button>
      <router-view></router-view>
      </div>`,
      data() {
        return {
          type: "??",
          id: ''
        }
      },
      methods: {
        nav() {
          if (this.id == 1) {
            // 使用编程式导航跳转到嵌套路由
            this.$router.push({
              name: 'Shui',
              params: {
                username: 'jackandrose'
              }
            })
          } else if (this.id == 2) {
            this.$router.push({
              path: `/product/${this.id}/dian`
            })
          } else if (this.id == 3) {
            this.$router.push({
              name: 'Fu'
            })
          }
        }
      },
      watch: {
        // 监听路由的参数的变化
        // to是目标路由对象
        // from是源路由对象
        '$route'(to, from) {
          this.id = to.params.id
          if (this.id == 1) {
            this.type = '水果'
          } else if (this.id == 2) {
            this.type = '电器'
          } else if (this.id == 3) {
            this.type = '服装'
          }
        }
      },
      // 在mounted钩子函数中获取参数
      mounted() {
        console.log(this.$route)
        // 通过this.$route.params可以来获取当前的路由参数
        this.id = this.$route.params.id
        if (this.id == 1) {
          this.type = '水果'
        } else if (this.id == 2) {
          this.type = '电器'
        } else if (this.id == 3) {
          this.type = '服装'
        }
      }
    })

    var Shui = Vue.component('shui', {
      template: '<div>水果详细信息</div>',
      mounted() {
        console.log(this.$route)
      }
    })
    var Dian = Vue.component('dian', {
      template: '<div>电器详细信息</div>'
    })
    var Fu = Vue.component('fu', {
      template: '<div>服装详细信息</div>'
    })
    // 通过new VueRouter构造函数来创建路由
    var router = new VueRouter({
      // 通过routes来添加路由配置，每个路由配置都是一个对象，里面有常用属性，name，path，component
      routes: [{
          path: '/',
          // 实现重定向
          redirect: {
            name: 'Index'
          }
        },
        {
          name: 'Index',
          path: '/index',
          component: Index
        },
        {
          name: 'Product',
          // 添加路由的参数配置，参数的标识就是：
          // id这个名称你可以随意定义，它就相当于一个形参，她所影响不是你如何传递参数，而是后期如何获取参数
          path: '/product/:id',
          component: Product,
          // 添加当前路由的嵌套路由，通过children来添加
          // children是一个数组，里面的每一个值都是一个具体的配置对象
          // 细节：嵌套路由不要添加/,否则会造成路由层级的问题
          children: [{
              name: 'Shui',
              path: 'shui',
              component: Shui
            },
            {
              name: 'Dian',
              path: 'dian',
              component: Dian
            },
            {
              name: 'Fu',
              path: 'fu',
              component: Fu
            },
          ]
        }
      ]
    })
    var vm = new Vue({
      el: '#app',
      // 挂载路由
      router,
      data: {}
    })
  </script>
</body>

</html>

嵌套路由

回顾路由中出现的关键字

VueRouter：创建路由对象的构造函数

router：vm实例中挂载路由的属性

routes：配置路由的属性--数组

router-view：路由展示区域

router-link：超链接

$route：获取参数和对象

$router：实现编程式导航的对象，它有push方法可以实现编程式导航