2019-11-20 Vue路由配置和获取路由参数并监听参数变化

在vue项目中，假使我们在同一个路由下，只是改变路由后面的参数值，如果不监听路由参数值的变化，页面无数据刷新，需手动刷新浏览器，这样做就不是我们的预期效果。

举例：当前路由为 /pjthome?pjtid=123456
我们可以通过如下形式获取路由参数

mounted: function () {
      this.pjtid = this.$route.query.pjtid
      this.pjtdetail()
},

在页面pjtdetail(）方法中，需要用到pjtid这个参数，假如在同一页面有相似项目切换，只是pjtid发生变化，在切换时，并未重新加载数据，原因是跟vue的生命周期有关，具体该解决这个问题，添加路由监听即可。

watch: {
      $route(){
        this.pjtid = this.$route.query.pjtid
      },
      pjtid() {
        this.pjtdetail()
      },
}

补充：vue路由设置路由参数有2种方式：

1.通过query配置：

<router-link :to="{ name:'login',query:{id:1} }">登录</router-link>

通过query配置的路径显示如下：

2.通过params配置：

<router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>

通过query配置的路径显示如下：

通过该方法配置的参数，需要在配置路由的时候给参数留个坑，如下图：

获取路由参数的方法：

1.通过query配置的：

this.$route.query

2.通过params配置的：

this.$route.params