vue的七种动态路由传参

柔光的暖阳◎ 2023-03-01 10:41 41阅读 0赞

# params传参(4种) #

### 1.给路由的规则中配置接收参数 ###

{
        path: '/details/:yaxu',
        name: 'details',
        component: () => import( '../views/Details.vue')
      },

### 2.发送数据 ###

**（1）编程式导航发送数据2种写法**

1.this.$router.push("/路径/数据")
        示例:this.$router.push('/details/我是从one页面过来的')
        
     2.this.$router.push({name:"你要跳转的那个路由的名字",params:{key:val,key:val}})
       示例:this.$router.push({name:'details',params:{yaxu:'11111111'}})

**(2)声明式导航发送数据2种写法 ----- 把编程式push小括号里面的复制过来即可**

1.<router-link to="/路径/数据">newsall</router-link>
    示例:<router-link to='/details/我是从one页面过来的'>routerLink1</router-link>  
    
    2.<router-link :to='{name:"你要跳转的那个路由的名字",params:{key:val,key:val}}'>newsall222</router-link>
    示例:<router-link :to="{name:'details',params:{yaxu:'11111111'}}">routerLink2</router-link>

### 3.接收数据 ###

this.$route.params.yaxu

# query传参(3种) #

**注意：不需要再次在路径中配置接收参数**

### 1.发送数据 ###

**编程式导航发送数据的3种写法**

1.this.$router.push("/路径?key=val&key1=val1&.......")
    示例:this.$router.push("/details?yaxu=123")
    
    2.this.$router.push({name:"路由名字",query:{key:val,Key：val1}}) 
    示例:this.$router.push({name:'details',query:{yaxu:'3333'}}) 
    
    3.this.$router.push({path:"/路由路径",query:{key:val,Key：val1}})
    示例:this.$router.push({path:'/details',query:{yaxu:'44444'}})

### 2.接收数据 ###

this.$route.query.yaxu

# params与query的区别 #

<table> 
 <tbody> 
  <tr> 
   <td>用法上</td> 
   <td>url展示上</td> 
  </tr> 
  <tr> 
   <td>query要用path来引用,params要用name来引用,接受蚕食都是类似的,分别是this.route.query.name和this.route.query.name和this.route.query.name和this.route.params.name</td> 
   <td>params类似于post, query更加类似于我们ajax中get传参,说的再简单- -点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一点</td> 
  </tr> 
 </tbody> 
</table>