vue 跳转页面并传递参数 - 简书 vue 跳转页面并传递参数
Vue3跳转：
useRoute 为获取参数，useRouter 为编程式导航直接html里面写<div class="link-login" @click="$router.push({path:'/register'})"> 没有账号，立即注册</div>方式1import { useRoute, useRouter } from 'vue-router';export default { setup() { const router = useRouter(); function goto(){ router.push("/about"); } return{ goto //一定要要放在return里才能在模板上面使用 } }}方式2import 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=>{}) //refpayOrderStatus(state.orderNo).then(res=>{}) //reactiveVue2
<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 }});跳转地址 ====> /detail?name=admin&code=10021取值 ====> this.$route.query.name//params的跳转方式 跳转相同页面数据不刷新bugthis.$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; },注意！！！传参跳转页面时，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上会出现具体的字段，比较不安全