企业开源网站系统,中国建设银行网上银行个人登录官方网站,网站服务器建立,高安网站制作方法一#xff1a;params 传参
this.$router.push({name:admin,//这里的params是一个对象#xff0c;id是属性名#xff0c;item.id是值(可以从当前组件或者Vue实例上直接取)params:{id:item.id}
}) //这个组件对应的路由配置
{//组件路径path: /admin,//组…方法一params 传参
this.$router.push({name:admin,//这里的params是一个对象id是属性名item.id是值(可以从当前组件或者Vue实例上直接取)params:{id:item.id}
}) //这个组件对应的路由配置
{//组件路径path: /admin,//组件别名name: admin,//组件名component: Admin,
}
通过 params 传递参数如果我们想获取 id 的参数值可以通过 this.$route.params.id。
//vue接收页面
let id this.$route.params.id;
let name this.$route.params.name;
⚠️特别注意获取参数的时候是 route跳转和传参的时候是 r o u t e r 。注意route与router的区别
demo // 传递
divclassbox df-columnv-for(item, index) in descList:keyindexclickgoToDetail(item, policyInterpretation)/divgoToDetail(data, name) {this.$router.push({name,params: {data,}})console.log(data, 政策中心);},// 接收console.log(this.$route.params) // 必须配合name使用 方法二路由属性配置传参
this.$router.push({path:/admin/${item.id},
}) //这个组件对应的路由配置
{//组件路径path: /admin:id,//组件别名name: admin,//组件名component: Admin,
}
通过路由属性配置传参我们可以用 this.$route.params.id 来获取到 id 的值。
//vue接收页面
let id this.$route.params.id;
let name this.$route.params.name; ⚠️注意this.$router.push 方法里面路径带的是值路由配置项那里带的是变量名(属性名)来实现的对应。 以上两种传参方式基本上可以理解为 ajax 中的 post 请求方式参数都是不可见的但是上面两种方法都有一个弊端就是当页面刷新了是获取不到参数值的那么有没有一种方法是页面刷新之后参数依然存在呢
方法三query 传参 this.$router.push({name:/admin,query:{iditem.id,nameitem.name,}
})//这个组件对应的路由配置
{//组件路径path: /admin,//组件别名name: admin,//组件名component: Admin,
}通过 query 传参如果我们想获取 id 的参数值可以通过 this.$route.query.id。
//vue接收页面
let id this.$route.query.id;
let name this.$route.query.name;用 query 传参可以解决页面刷新参数消失问题这种方式可以理解为是 ajax中的 get 方法参数是直接在 url 后面添加的参数是可见的。 方法四localStorage
// 存数据
localStorage.setItem(numbers, JSON.stringify(this.numbers));// 取数据
this.numbers JSON.parse(localStorage.getItem(numbers));但是注意使用 localStorage 时如果变量名起的过于普通可能容易被其它页面存的数据覆盖。
