Vue中路由

路由传参

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。

  <li v-for="article in articles" @click="getDescribe(article.id)">

• 方案一，需要对应路由配置如下：

   {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

• 方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

  this.$router.push({
     name: 'Describe',
     params: {
       id: id
     }
   })

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

子组件中: 这样来获取参数

this.$route.params.id

• 方案三：

父组件：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=？

   this.$router.push({
         path: '/describe',
         query: {
           id: id
         }
       })

对应路由配置：

对应子组件: 这样来获取参数

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

对应子组件: 这样来获取参数

this.$route.query.id

这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要

---

页面的跳转

• 在template中的常见写法：

<router-link to="/miniCard/statement/horizon">
     <button class="btn btn-default">点击跳转</button>
</router-link>

• 在js中设置跳转（在方法中跳转界面并传参，两种方式：params 与 query）：

  有时候我们需要的是点击按钮跳出弹窗，选择判断后进行跳转，我们常用.$router.push 跳转 传参：

<button @click = "func()">跳转</button>

//js
<script>
    export default{
        methods:{
            func (){
                this.$router.push({name: '/order/page1',params:{ id:'1'}});
            }
        }
    }
</script>

另有：

this.$router.push({path: ''/order/index''});
this.$router.push({path: '/order/page1',query:{ id:'2'}});
this.$router.push({name: '/order/page2',params:{ id:'6'}});

//  path:'路由里配置的index.vue的路径'
//  params:{id:'1',name:'eva'} /query:{id:'5'}  需要传递的参数和值

路由传参params 和query两种方式的区别：　　
1.用法上的

刚才已经说了，query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候，已经是$route而不是$router了哦！！

2.展示上的

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

• 路由参数的取值：

{{this.$route.params.参数名}}

注意接收参数的时候，已经是$route而不是$router了哦！！

---

路由钩子函数

1.computed 计算属性

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue

1..aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
2.. aPlus(){
　　　　return this.$router.params
　　}

这两种方法都可以，平时我们可以只写get，可以写成2形式，省略set方法，但是如果我们相对我们的计算属性进行修改，这个set方法不能省略。

2.methods 方法

这里只提一下它和computed的区别

methods 和 computed 看起来可以做同样的事情，单纯看结果两种方式确实是相同的。
然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变
时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会
立即返回之前的计算结果，而不必再次执行函数。相比而言，只要发生重新渲染，method 调用总会执行
该函数。

3.watcher

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
}

这里主要说深度watcher 加一个 deep:true，类似于深拷贝的深，可以监听数组和对象

4.生命周期函数

之前有总结过，这里说两点

Vue.nextTick(function () {
  // DOM 更新了
})

在vue做表格的时候，一般在操作完之后，要更新列表刷新数据。但是我们本地做一些表格的变换，不想发请求怎么办？我们可以利用nextTick，比如， ,在我们更新完数据，这个表格因为没有更新数据，所以它没有变化，我们可以 this.tab = ’ ’ this.$nextTick(() => this.tab = ‘a’)

在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。原因是什么呢，原因是

1.在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick() 的回调函数中。与之对应的就是 mounted 钩子函数，因为该钩子函数执行时所有的 DOM 挂载和渲染此时在该钩子函数中进行任何DOM操作都不会有问题 。

2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM 结构的时候，这个操作都应该放进 Vue.nextTick() 的回调函数中。

小结：

• beforecreate : 可以在这加个loading事件，在加载实例时触发
• created : 初始化完成时的事件写在这里，如在这结束
• loading事件，异步请求也适宜在这里调用
• mounted : 挂载元素，获取到DOM节点
• updated : 如果对数据统一处理，在这里写上相应函数
• beforeDestroy : 可以做一个确认停止事件的确认框
• nextTick : 更新数据后立即操作dom