vue-router中 query传参和params传参的使用和区别

Love The Way You Lie 2021-07-27 01:12 494阅读 0赞

## 1.query传参： ##

1.query传参  
路由：

var router = new VueRouter({
          routes: [
            { path: '/login', component: login },
            { name:'register',path: '/register', component: register } 
          ]
        })

导航：

// 注意：这是 query 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
        <router-link to="/login?id=10&name=zs">登录</router-link>
        <router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link>
        或
        <router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link>
        
        
    等同于：
    	this.$router.push('/login?id=10&name=zs')
    	this.$router.push({path:'/register',query:{id:5,name:'lili'}})
    	或
    	this.$router.push({name:'register',query:{id:5,name:'lili'}})

**注意：jquery可以通过name或path来引入路由**

## 2.params传参 ##

2.params传参  
路由：

var router = new VueRouter({
          routes: [
            { path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id/:name） 刷新页面 参数会消失,页面中就丢失了数据
            { name:'register', path: '/register', component: register }
          ]
        })

导航：

// 注意：这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
        <router-link to="/login/12/ls">登录</router-link>
        <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
        
    等同于：
    	this.$router.push('/login/12/ls')
    	this.$router.push({name:'register',params:{id:10,name:'lili'}})

**注意：params只能通过name来引入路由，path会undefined**

## jquery传参和params传参的区别 ##

**1.用法上:**

1.  上文已经提到query可以用name或path来引入
2.  params必需要用name来引入，接收参数都是类似的，分别是:  
    `this.$route.query.name`和`this.$route.params.name`。

**2.地址栏表现形式上:**  
**query：**  
![在这里插入图片描述][20181120175643540.png]

**params：**  
![在这里插入图片描述][20181120175546451.png]  
`注意：这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失`

[20181120175643540.png]: /images/20210726/8126a90341894147bc94f2a77aacace8.png
[20181120175546451.png]: /images/20210726/21b6b24803164cedae6f6f98e33305db.png