Vue页⾯跳转传递参数及接收⽅式
最近接触了vue项⽬，这⾥记录⼀下vue跳转到下⼀页⾯携带参数的两种⽅式。
典型应⽤场景：列表页跳转到详情页
⼀、配置路由
⽂件路径：src/router/config.php
import Vue from 'vue'
import Router from 'vue-router'
import classify from '.././components/classify/classify.vue'
import classifyChild from '.././components/classify/classifyChild.vue'
export default new Router({
mode: 'history',
routes: [
{
path: '/classify',
name: ' classify',
component: classify
},
{
path: '/classify/classifyChild',
name: 'classifyChild',
component: classifyChild
},
]
})
⼆、页⾯跳转及传参sessionstorage和localstorage
//⽅式⼀
<router-link :to="{name:'classifyChild',params:{id:item.id}}">
<button>跳转</button>
</router-link>
//⽅式⼆
<router-link :to="{path:'/classify/classifyChild',query:{id:item.id}}">
<button>跳转</button>
</router-link>
三、参数接收
//对应于⽅式⼀
let id=this.$route.params.id;
//对应于⽅式⼆
let id=this.$route.query.id;
补充知识：关于vue3.0中的this.$place({ path: '/'})刷新⽆效果问题
⾸先在store中定义所需要的变量可以进⾏初始化，再定义⼀个⽅法，登录成功后A页⾯，跳转到B页⾯之前，需要直接调⽤store中存储数据的⽅法，全局可以使⽤，顺序是，先调⽤store中的数据，其次调⽤sessionStorage和localStorage中的数据。这样的话，可以避免A页⾯跳转B页⾯时候，⼿动刷新才显⽰信息。
直接登录成功后，直接调⽤store的⽅法，把值存储进去，B页⾯可以直接显⽰⽤户信息。必须在store定义⽅法，登录成功后调⽤⽅法进⾏回显⽤户信息。在这⾥插⼊图⽚描述
如此⼀来，就可以避免必须⼿动刷新⼀下才会显⽰信息。
以上这篇Vue页⾯跳转传递参数及接收⽅式就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。