Vue 页面跳转params、query传参
https://www.jianshu.com/p/c699c4d197devue 跳转页面并传递参数https://blog.csdn.net/weixin_40297452/article/details/90704936<router-link :to="'/index/'+id" tag="li"> //(id是参数) 加tag 就解析成了可以点击的li<...
·
vue 跳转页面并传递参数 - 简书 vue 跳转页面并传递参数
Vue3跳转:
useRoute 为获取参数,useRouter 为编程式导航
直接html里面写
<div class="link-login" @click="$router.push({path:'/register'})">
没有账号,立即注册
</div>
方式1
import { useRoute, useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
function goto(){
router.push("/about");
}
return{
goto //一定要要放在return里才能在模板上面使用
}
}
}
方式2
import router from "../../router/index.js";
router.push("/");
//传参与vue2一样
router.push({
path: '/detail',
query: {
name: 'admin',
code: 10021
}
});
取参数
setup(){
const route = useRoute();
let id = ref(0);
onMounted(()=>{
id.value = route.query.id;
getDetail(id.value).then(res=>{
})
})
},
//请求传参
getDetail(id.value).then(res=>{}) //ref
payOrderStatus(state.orderNo).then(res=>{}) //reactive
Vue2
{
path: `/consumerTips/listofEnterprises/:clueId`,
component: () => import("@/views/consumerTips/tabs/listofEnterprises"),
meta: { title: "企业清单" },
hidden: true,
},
tolistofEnterprises(clueId,data) {
const url = '/consumerTips/listofEnterprises/' + clueId
this.$router.push({
path: url,
query:{
evidenceFileId:data.evidenceFileId,
}
});
},
<router-link :to="'/index/'+id" tag="li"> </router-link>//(id是参数) 加tag 就解析成了可以点击的li
<router-link to="/" enent="mouseover">变成了鼠标移入切换</router-link>
//query 推荐
<router-link :to="{path:'/CateInner',query: {id: item.id}}">详情</router-link>
//params 跳转相同页面数据不刷新
<router-link :to="{name:'CateInner',params:{id: item.goodsid}}">详情</router-link>
注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
const router = new VueRouter({
mode:'history',//默认是hash模式
linkActiveClass:'menvscode-active',//导航选中样式
scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
console.log(to) // to:要进入的目标路由对象,到哪里去
console.log(from) // from:离开的路由对象,哪里来
console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
if(savePosition) {
return savePosition;
}else{
return {x:0,y:0}
}
},
routes:[]
注意: savePosition 这个功能只在 HTML5 history 模式下可用。
简写:
this.$router.push("pathname");
this.$router.push("/path");
$router方式跳转
//推荐query的跳转方式
this.$router.push({
path: '/detail',
query: {
name: 'admin',
code: 10021
}
});
//传对象
handleDetail(row, type) {
this.$router.push({
path: '/dependencies/detail',
query: {
detailData: JSON.stringify(row), // row为一个对象
type: type
}
})
}
//接收
created() {
this.type = this.$route.query.type
this.detailData =JSON.parse(this.$route.query.detailData)
}
跳转地址 ====> /detail?name=admin&code=10021
取值 ====> this.$route.query.name
//params的跳转方式 跳转相同页面数据不刷新bug
this.$router.push({
name: 'detail',
params: {
id: 10021
}
});
跳转地址 ====> /detail/10021
取值 ====> this.$route.params.id
页面接收参数
created(){
let uni = this.$route.query.unique;
this.name = this.$route.query.id;
},
//this.$router.resolve跳转方式
detail(id){
let route2 = this.$router.resolve({
name:'ourserve', //这里是跳转页面的name
query:{
id:id //要传的参数
}
})
window.open(route2.href,'_blank') //打开新的页面
},
注意!!!
传参跳转页面时,query不需要再路由上配参数就能在新的页面获取到参数,
params也可以不用配,但是params不在路由配参数的话,当用户刷新当前页面的时候,参数就会消失。
也就是说使用params不在路由配参数跳转,只有第一次进入页面参数有效,刷新页面参数就会消失。
params 传递多个参数
传递多个参数时,params可以配合路由中的name 来使用,也可以和传递一个参数那样 直接在路由路径上拼接多个参数(配合JAVA)
对应组件使用路由的方法如下:/:id和/:age不能省略,且不能改名字
对应目标组件,获取路由上传过来的参数:
注意:是this.route 而不是 this.router
查询参数(query)
使用查询参数的方式,在路由配置中,path就不用再拼接参数
在父组件中,直接将需要传递的参数放在query里,如下
在子组件中使用this.route.query 接收参数
ps:使用params传递参数,url上只会出现数据,不会出现具体字段
而使用查询参数query的方式,url上会出现具体的字段,比较不安全
更多推荐
已为社区贡献60条内容
所有评论(0)