vue 实现跳转时参数隐藏获取
vue 跳转:this.$router.push({name:"",path:"",params:{ "key":"value"}//有时候也会存在一个query的对象参数})说明:如果你在路由配置好了,name属性,和你设置的页面地址的话,上面的代码就可以简写成this.$router.push({name:"路由页面名称"params:{"id":"idValue});在另个需要跳转的页面下如
·
vue 跳转:
this.$router.push({
name:"",
path:"",
params:{ "key":"value"}
//有时候也会存在一个query的对象参数
})
说明:
如果你在路由配置好了,name属性,和你设置的页面地址的话,上面的代码就可以简写成
this.$router.push({
name:"路由页面名称"
params:{"id":"idValue}
);
在另个需要跳转的页面下如果获取参数呢?
一般是在create 方法去初始化就获取参数,然后进行数据渲染(后台访问数据),语法如下:
const id = this.$route.params.id;
举例如下:
1.下面是你route下js 页面路由的配置
{
path: 'pages/jump/:Id(\\d+)',
component: (resolve) => require(['@/views/pages/index'], resolve),
name: 'createyouPage',
meta: { title: '跳转一个页面' }
},
//@/views/pages/index 含义是,在views目录下的pages文件夹,页面名称为index.vue,简写为index
//name 名称就是自定义的
//path :'pages/jump/:Id(\\d+) ,也就是请求的url一样的,而真实的请求是component 那个路径
2.比如我有一个跳转前的页面叫做,current.vue
查看按钮:<el-button @click="jump(scope.row)">查看详情</el-button>
方法:jump
jump(data){
// 执行跳转页面到另一个页面
this.$router.push({
name:"createyouPage",
params:{"Id":data.id}
}
)
}
3.在跳转后的页面
create(){
//从地址栏中获取参数
const id = this.$route.params.Id;
//获取到了id ,执行后续操作即可了
}
注意的是:隐式传递的参数在下一次F5 刷新之后有出现过参数不存在,参数信息传递的内容就会丢失。
比如说:id = 1 时是入参,地址栏内第一次是存在的,访问接口时数据存在,F5刷新后,地址栏参数信息将会丢失,接口数据未被调用。而在显式参数传递不会出现这种情况,所有还是觉得传递的数据采用加密方式比较好。
更多推荐
已为社区贡献1条内容
所有评论(0)