vue学习笔记--动态路由跳转，页面响应路由参数的变化

最近在做项目中遇到一个问题，当搜索公司名字的时候，需要刷新页面数据并且改变地址栏的参数

query传递参数

searchCompany () {
      this.$router.push({
        path: 'company',
        query: {
          page: 1,
          word: this.searchValue === '' ? undefined : this.searchValue,
          search:this.searchValue
        }
      })
    }
复制代码

通过注入路由器，我们可以在任何组件内通过用this.route访问当前路由.使用this.$router.push(location).可以导航到不同的 URL。这个方法会向 history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

栗子：

// 字符串
router.push('home')

// 对象
this.$router.push({path: '/login?url=' + this.$route.path});

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
复制代码

响应路由参数的变化

watch（监测变化） $route 对象

（引用官网解释）当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}
复制代码

或者使用 beforeRouteUpdate 守卫：

  beforeRouteUpdate (to, from, next) {
    this.$parent.loading = true
    this.reload({ item: 'company', params: {
      page: to.query.page ? to.query.page : undefined,
      word: to.query.word ? to.query.word : undefined,
      search:this.searchValue
    }})
      .then(res => {
        this.$parent.loading = false
      })
    next()
  }
复制代码

在组件更新前重新调用生命钩子，重新加载接口，从而达到更新页面