Vue 路由传参 params query

最新推荐文章于 2024-08-19 19:55:55 发布

一头萌新

最新推荐文章于 2024-08-19 19:55:55 发布

阅读量262

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43712933/article/details/107403180

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文深入探讨了在前端开发中，如何使用Vue Router进行参数传递，包括params和query两种方式的区别与应用场景。通过实例展示了如何配置路由、传递参数以及在组件中获取这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.params
配置路由格式：/router/:id
传递方式：在path后面跟上对应的值
传递后形成的路径：/router/123,/router/abc

const routes=[
//路由配置页
{
   path:'/user/:userId',
   component:home
}

// 在app.vue写
 <router-link  :to="'/user/'+userId">我的</router-link>  
 
//在 user.vue里写（路由对应子组件）
<template>
    <div>
       {{userId}}   //拿到上面拼接的值
       {{$route.params.userId}}  //可以直接用
    <div>
</template>
 <script>
    export default{
        name:'User',
        computed:{
                 usrId(){
                   return  this.$route.params.userId   
                   //取到值   后面userId是路由页配置冒号后面的值
                   //$route是处于活跃状态  拿的就是谁
                 }
         }
}
 </script>

通过监听标签点击

this.$router.push({
 path:"/detail",
 params:{
 name:'nameValue',
 code:10011
 }
});

2.query
配置路由格式：/router，也就是普通配置不像上面有冒号那样
传递方式：对象中使用query的key作为传递方式
传递后形成的路径：/router?id=1253,/router?id=adc

//路由配置页
const Profile = () =>import('../components/Home')
{
   path:'/profile',
   component:Profile
}

// 在app.vue写
 <router-link  :to="{path:'/profile',query:{name:'abc',age:18}}">我的</router-link>  //记得v-bind绑定
 //在 user.vue里写（路由对应子组件）
<template>
    <div>
       {{$route.query.name}} 
    <div>
</template>
 <script>
    export default{
        name:'User',
        computed:{
             age(){
                 return  this.$route.query.age 
             }
         }
}
 </script>

通过监听标签点击

<div id=“app”>
    <button @click="btn1click">首页</button>   
    <button @click="btn2click">关于</button>  
</div>

<script>
let app=new Vue({
  el:'app',
  data:{
  },
  methods:{
   btn1click(){
     this.$router.push({
        path:'/profile',
        query:{
           name:'zhangsan',
           age:180
        }
     }) 
   },
   btn2click(){
     this.$router.replace('/about')        //history.replaceState()  不能返回
   }
  }
)}
</script>