vue路由带参跳转，刷新后参数不消失

方法一：$router里使用query对象

路由带参数跳转

this.$router.push({
                        name: 'IcProjectView',//跳转的路由（路由的name）
                        params: {//params
                          id: params.row.id,
                          CURD: {
                            value: 'read', readonly: true, disabled: true, visiable: false,
                          },
                        },
                        query:{value: 'read', readonly: true, disabled: true, visiable: false}//query对象，跳转到新路由，然后刷新页面，能继续获取到query 对象
                      })	

刷新页面获取query对象

created() {
      if(this.$route.params.CURD!=undefined){
        this.CURD.value = this.$route.params.CURD.value;
        this.CURD.readonly = this.$route.params.CURD.readonly;
        this.CURD.disabled = this.$route.params.CURD.disabled;
        this.CURD.visiable = this.$route.params.CURD.visiable;
      }else{
        this.CURD.value = this.$route.query.value;
        this.CURD.readonly = this.$route.query.readonly;
        this.CURD.disabled = this.$route.query.disabled;
        this.CURD.visiable = this.$route.query.visiable;
      }

}

这样你的 url 就会像 http://xxx.xxx.xxx/value?value='read'，这样无论你怎么刷新 value都不会丢失,参考https://router.vuejs.org/zh-cn/essentials/named-routes.htmlVue-router 命名路由

ps:

router-link

• 在HTML5 history模式下使用了base选项,所有to属性可以不用写基路径
• 会拦击点击事件,不会重新加载页面.
• router-link默认渲染为a标签,我们可以通过tag属性设置为别的标签(常用的li).

• to属性可以绑定name(命名组件),query(带查询参数)

<router-link :to="{name:'entityList', query:{page: 'Ecp.SystemMessage.List.vdp'}}"
 class="msg" tag="li">

</router-link>//放在需要跳转的标签内

方法二：$router里使用params对象
this.$router.push({name:'articleDetail, params:{articleId: articleId}}); 跳转，那么在路由里就要这样写

routes: [
    {
      path: '/articleDetail/:articleId',
      name: 'articleDetail'
    }
  ]

path: '/articleDetail/:articleId', 里的 :articleId 是必须要有的