Vue设置添加和返回按钮，并通过路由携带参数

本文链接：https://blog.csdn.net/weixin_43794897/article/details/85014860

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.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.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||'';
.....

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