Vue设置添加和返回按钮,并通过路由携带参数
Vue设置添加按钮1.在cms模块的裸游文件中配置"添加页面的路由":{path:'/cms/page/add',name:'新增页面',component: page_add,hidden:true}2.在页面列表添加“添加页面”的按钮<router‐link class="mui‐tab‐item"
Vue设置添加按钮
1.在cms模块的裸游文件中配置"添加页面的路由":
{path:'/cms/page/add',name:'新增页面',component: page_add,hidden:true}
2.在页面列表添加“添加页面”的按钮
<router‐link class="mui‐tab‐item" :to="{path:'/cms/page/add/'}"> <el‐button type="primary" size="small">新增页面</el‐button>
</router‐link>
3.在新增页面添加提交的表单,进行数据的提交
Vue设置返回按钮,并携带参数
1.在页面上添加返回按钮,并携带参数
<router‐link class="mui‐tab‐item" :to="{path:'/cms/page/add/',query:{ page: this.params.page,
siteId: this.params.siteId}}">
<el‐button type="primary" size="small">新增页面</el‐button>
</router‐link>
2.定义返回方法
添加返回按钮
<el‐button type="primary" @click="go_back" >返回</el‐button>
定义返回方法,并携带参数到需要返回的页面
go_back(){
this.$router.push({
path: '/cms/page/list', query: {
page: this.$route.query.page,
siteId:this.$route.query.siteId
} })
}
说明:
a、通过在路由上添加key/value串使用this.
r
o
u
t
e
.
q
u
e
r
y
来
取
参
数
,
例
如
:
/
r
o
u
t
e
r
1
?
i
d
=
123
,
/
r
o
u
t
e
r
1
?
i
d
=
456
可
以
通
过
t
h
i
s
.
route.query来取参数,例如:/router1?id=123 ,/router1?id=456 可以通过this.
route.query来取参数,例如:/router1?id=123,/router1?id=456可以通过this.route.query.id获取参数id的值。
b、通过将参数作为路由一部分进行传参数使用this.
r
o
u
t
e
.
p
a
r
a
m
s
来
获
取
,
例
如
:
定
义
的
路
由
为
/
r
o
u
t
e
r
1
/
:
i
d
,
请
求
/
r
o
u
t
e
r
1
/
123
时
可
以
通
过
t
h
i
s
.
route.params来获取,例如:定义的路由为/router1/:id ,请 求/router1/123时可以通过this.
route.params来获取,例如:定义的路由为/router1/:id,请求/router1/123时可以通过this.route.params.id来获取,此种情况用this.$route.query.id是拿不到的。
3.在原页面上使用钩子函数,回显数据
因为在页面加载的时候就需要带回数据,因此需要使用created函数来进行数据的带回
created() {
//从路由上获取参数
this.params.page = Number.parseInt(this.$route.query.page||1); this.params.siteId = this.$route.query.siteId||'';
.....
小技巧:使用 || 返回第一个有效值
更多推荐
所有评论(0)