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

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

1. 用法上

• query 可以用 name 或 path 来引入
• params 必需要用 name 来引入
• 接收参数都是类似的，分别是:this.$route.query.name和this.$route.params.name

2. 地址栏上

• query ： /login?id=10&name=zs
• params : /login/10/zs (提前在路由文件中定义过 id 与 name)

3. query 传参

3.1 路由

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

3.2 导航

// 注意：这是 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'}})

query 可通过 name 和 path 引入路由

4. params 传参

4.1 路由

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

4.2 导航

// 注意：这是 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

本文首发于本人博客：https://blog.gitnote.cn/post/vue-router-query-params/

版权信息: CC BY-NC-SA 4.0 (自由转载-非商用-相同方式共享-保持署名)