方法一:$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 是必须要有的

Logo

前往低代码交流专区

更多推荐