vue路由带参跳转,刷新后参数不消失
方法一:$router里使用query对象路由带参数跳转this.$router.push({name: 'IcProjectView',//跳转的路由(路由的name)params: {//paramsid: params.row.id
·
方法一:$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 是必须要有的
更多推荐
已为社区贡献2条内容
所有评论(0)