路由传参总结

第一种方式：动态路由参数

//当前页面的配置
<template>
       <div>
         //第一种跳转和传参的方式
      <router-link to="/detail/aaa/12">跳转吧</router-link>
        //第二种跳转传参的方式，使用事件
<button @click="goDetail">跳转吧</button>
         <Navgation></Navgation>
    </div>
</template>
<script>

import Navgation from '@/components/Navigation'
export default {      
    data(){
        return{          

        }
    },
    methods: {       
      goDetail(){
      this.$router.push('/detail/老王/23')
       }
      
    },
    computed: {
      
    },
    components:{
 
        Navgation
   
    }
    
}
</script>
<style lang="less" scoped>
 
</style>

//要跳转到的页面
<template>
    <div>
        <div>这是详情页名字:{{name}}</div>
        <div>这是详情页年龄:{{age}}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg:""
        }
    },
    created() {
        this.name=this.$route.params.name
        this.age=this.$route.params.age

        console.log("msg",this.$route.params)
        
    },
}
</script>

//路由的配置
    {
        path: "/detail/:name/:age",
        name: "detail",
        component: () =>
            import ('@/components/Detail')
    }

特点是：
1.刷新后，穿过来的参数不会消失
2.传递的参数信息会拼接在URL后面
3.不管通过<router-link to="/detail/aaa/12">跳转吧</router-link>还是this.$router.push('/detail/老王/23')，都可以实现相同的效果
效果：

效果图

第二种路由传参方式：通过name来匹配路由，通过param来传递参数

//当前页面
<template>
       <div>        
      
        <button @click="goDetail">跳转吧</button>
         <Navgation></Navgation>
    </div>
</template>
<script>

import Navgation from '@/components/Navigation'
export default {      
    data(){
        return{
           

        }
    },
    methods: {       
       goDetail(){  
      this.$router.push({
          name:'detail',
          params:{
              name:"小李子",
              age:12 
          }
      })
       }      
    },
    computed: {
      
    },
    components:{
 
        Navgation
   
    }
    
}
</script>
<style lang="less" scoped>
 
</style>

//要跳转到的页面
<template>
    <div>
        <div>这是详情页名字:{{name}}</div>
        <div>这是详情页年龄:{{age}}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg:""
        }
    },
    created() {
        this.name=this.$route.params.name
        this.age=this.$route.params.age

        console.log("msg",this.$route.params)
        
    },
}
</script>

//路由的配置
   {      
        path: "/detail",
        name: "detail",
        component: () =>
            import ('@/components/Detail')
    }

分析：刷新后，传过来的数据就没了
不拼接在URL地址栏上

当我们
效果图

效果图

第三种路由传参方式：path+query;query传递的参数会通过？id = xxx展示

//当前页面
<template>
       <div>        
              <button @click="goDetail">跳转吧</button>
         <Navgation></Navgation>
    </div>
</template>
<script>

import Navgation from '@/components/Navigation'
export default {      
    data(){
        return{           

        }
    },
    methods: {       
       goDetail(){  
      this.$router.push({
          path:'/detail',
          query:{
              name:"刘能",
              age:12 
          }
      })
       }      
    },
    computed: {
      
    },
    components:{ 
        Navgation   
    }    
}
</script>
<style lang="less" scoped>
 
</style>

//要跳转到的页面
<template>
    <div>
        <div>这是详情页名字:{{name}}</div>
        <div>这是详情页年龄:{{age}}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg:""
        }
    },
    created() {
        this.name=this.$route.query.name
        this.age=this.$route.query.age
        console.log("msg",this.$route.query)        
    },
}
</script>

//路由的pe
    {

        path: "/detail",

        name: "detail",
        component: () =>
            import ('@/components/Detail')
    }

效果图：

效果图

分析：
1.传的参数拼接在URL后面
2.刷新后传过来的参数不会消失