vue 实现跳转时参数隐藏获取

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刷新后，地址栏参数信息将会丢失，接口数据未被调用。而在显式参数传递不会出现这种情况，所有还是觉得传递的数据采用加密方式比较好。