Vue 页面跳转params、query传参

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 

<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的跳转方式 跳转相同页面数据不刷新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;
  },
 
注意！！！
传参跳转页面时，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上会出现具体的字段，比较不安全