vue-router中 query傳參和params傳參的使用和區(qū)別講解

更新時間：2024年01月17日 11:18:31 作者：alokka

這篇文章主要介紹了vue-router中 query傳參和params傳參的使用和區(qū)別講解,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

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/:id/:name', 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