vue 博客知识点汇总

1. vue修改url，页面不刷新

项目中经常会用到同一个页面，结构是相同的，我只是在vue-router中通过添加参数的方式来区分状态，参数可以在页面跳转时带上params，或者query，但是有一个问题，即使我们修改了参数，URL也显示已经改变，但页面并不会刷新，因为路由是相同的，vue就会认为你是同一个页面，从而复用已加载的页面，而不会重新加载，所以如果在created钩子中来区分状态明显是行不通的，可以通过watch监听事件来监听路由的变化：

 watch: {
    $route(to, from) {
      if (to.query.page !== from.query.page) {
        this.jumpPages();
      }
    }
  },

2.组件内部 beforeRouteLeave

使用导航守卫，必须用在页面级别的组件中，如果是组件内部嵌套的组件不生效。

3. vue 属性中使用变量拼接

div(
    class="drag-list-item" 
    v-for="(params, index) in showChartsList" 
    :key="index" 
    :style="{'marginTop': '20px', 'cursor': 'move'}"
    :ref="params+'div'"
)

params是变量，div是要拼接的字符串