vue路由的传递方式

路由跳转的方式

// 组件里面的使用
  methods:{
  	 //方法一 通过path+query来传递参数
        toXq(id){
          console.log(id);
          this.$router.push({
            path:"Xq",
            query:{
              id:id
            }
          })
        }
        
        //方法二 通过name+params来传递
        // toXq(id){
        //   console.log(id);
        //   this.$router.push({
        //     name:"Xq",
        //     params:{
        //       id:id
        //     }
        //   })
        // }
        
       
         //方法三 通过url动态传递
        // toXq(id){
        //   console.log(id);
        //   this.$router.push('./Xq'+id)
        // }
  }

路由接收参数的方式

 <!-- 方法一 通过path+query来传递参数 -->
 this.$route.query.id
 
 <!-- 方法二 通过name+params来传递 -->
 this.$route.params.id
 
 
  <!--  方法三 通过url动态传递  -->
  this.$route.params.id

路由的配置

 {
      //方式一 二路由路径
      path: '/xq',
      
      //方式三路由路径
      // path: '/xq:id',
      
      // 二路由路径,需要配置路由的name属性
      name: 'Xq',
      
      component: Xq
 }