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=456this.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/123this.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||'';
.....

小技巧:使用 || 返回第一个有效值

Logo

前往低代码交流专区

更多推荐